这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
预加载图片是提高用户体验的一个很好方法,实现图片预加载可以使用 CSS、JavaScript、Ajax 三种方法。下面逐一给大家介绍利用 CSS、JavaScript 及 Ajax 实现图片预加载的方法,需要的朋友参考下吧
预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验。本文将分享三个不同的预加载技术,来增强网站的性能与可用性。
实现图片预加载可以使用 css、JavaScript、Ajax 三种方法。下面分别介绍这些方法的实现。
使用 CSS
单纯的使用 css 可以将图片加载到页面元素的背景上,这种方法简单、高效:
- #div1 {
- background: url(http: //ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg) no-repeat -9999px-9999px; }
- #div2 {
- background: url(http: //ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg) no-repeat -9999px-9999px; }
在其他地方调用时,只要路径一致,浏览器就会在渲染过程中使用预加载(缓存)的图片。简单、高效,不需要任何 JavaScript。
弊端:使用这种方法,图片会随着页面加载同时加载,延长页面加载的时间,使用 JavaScript 辅助完成会更高效。
使用 CSS 和 JavaScript 结合
- functionpreload(){
- if(document.getElementById) {
- document.getElementById("div1").style.background ="url(http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg) no-repeat -9999px -9999px";
- document.getElementById("div2").style.background ="url(http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg) no-repeat -9999px -9999px";
- }
- }
- functionaddLoadEvent(func){
- varoldonload =window.onload;
- if(typeofwindow.onload !='function') {
- window.onload = func;
- } else{
- window.onload =function(){
- if(oldonload) {
- oldonload();
- }
- func();
- }
- }
- }
- addLoadEvent(preload);
我们把图片加载设置到页面加载完成之后,所以不必担心由于图片和页面同时加载而延长访问时间。
如果 JavaScript 运行失败也不必担心,仅仅是图片预加载失败而已,当调用图片时也能正常显示。
使用 JavaScript 实现
方法一
- varimages =newArray()
- functionpreload(){
- for(i =0; i < preload.arguments.length; i++) {
- images[i] = newImage()
- images[i].src = preload.arguments[i]
- }
- }
- preload(
- "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg",
- "http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg"
- )
方法二
这种方法其实和方法一是一样的原理 ,只不过没有放在数组中实现,而是分别去为 Image 对象的 src 负值。
- if(document.images) {
- img1 = newImage();
- img2 = newImage();
- img3 = newImage();
- img1.src = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg";
- img2.src = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg";
- }
使用 Ajax
假设上面的所有方法都不够酷炫,那么,还有一种方法,就是使用 Ajax 来实现图片的预加载。使用 DOM 来实现预加载,可以加载包括图片,CSS,JavaScript 的其他任何东西。相对于直接使用 JavaScript,使用 Ajax 的好处就是 CSS 和 JavaScript 可以在他们的内容不影响当前页面的情况下被预加载。对于图片来说这确实不是一个问题,尽管如此,这个方法依然很简洁高效:
- window.onload = function() {
- setTimeout(function() {
- // XHR to request a JS and a CSS
- varxhr = newXMLHttpRequest();
- xhr.open('GET', 'http://domain.tld/preload.js');
- xhr.send('');
- xhr = newXMLHttpRequest();
- xhr.open('GET', 'http://domain.tld/preload.css');
- xhr.send('');
- // preload image
- newImage().src = "http://domain.tld/preload.png";
- },
- 1000);
- };
就像这样,这段代码会预加载三个文件:preload.js,preload.css,preload.png。设置 1 秒的延时主要是防止加载 JavaScript 文件而导致正常页面的功能性问题。
为了将其封装起来,我们看看怎么使用原生 JavaScript 来写这一段代码:
- window.onload = function() {
- setTimeout(function() {
- // reference to <head>
- varhead = document.getElementsByTagName('head')[0];
- // a new CSS
- varcss = document.createElement('link');
- css.type = 'text/css';
- css.rel = 'stylesheet';
- css.href = 'http://domain.tld/preload.css';
- // a new JS
- varjs = document.createElement('script');
- js.type = 'text/javascript';
- js.src = 'http://domain.tld/preload.js';
- // preload JS and CSS
- head.appendChild(css);
- head.appendChild(js);
- // preload image
- newImage().src = 'http://domain.tld/preload.png';
- },
- 1000);
- };
在这里,我们通过 DOM 创建了三个元素来预加载了页面上的三个文件。正如原文中所提到的,对于 Ajax 来说,这个方法不是那么好。预加载的文件内容不应该添加到正在加载的页面中。
以上所述是小编给大家介绍的利用 CSS、JavaScript 及 Ajax 实现图片预加载的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0521/330097.html