目录 1. 使用jQuery图片预加载(延迟加载)插件Lazy LoadLazy Load也叫惰性加载,延迟加载,顾名思义,就是在图片未到达可视区域时,不加载图片,我们常常在很多的优秀网站上看到类似的例子,例如迅雷、土豆、优酷等,由于一个网页的图片非常多,一次性加载增加服务器压力,而且用户未必会拉到底部,浪费用户流量,Lazy Load采用按需加载,更快的加载速度从而达到优化网页的目的。 使用方法:
原文链接: jQuery图片预加载(延迟加载)插件Lazy Load 2. JS实现图片预加载在浏览器渲染图片的时候, 它获得图片的一片区域的时候, 就已经为这张图片预留了一片空白的区域来填充图片, 这就是预加载获得图片尺寸最原始的使用方法. 有时候会加载一些在当前页面没有用到的图片,是为了提前加载到缓存里,这样后面的页面就可以直接从缓存读取了。 加载大图的时候,我们可以先显示模糊的缩略图,等到大图加载完了,再把缩略图替换掉,这样填补了图片加载期间的空白时间。 image也有onload和onerror事件,分别是加载完后和加载失败时执行。 Image对象是专门用于处理图片加载的,就相当于内存中的img标签。 图片预加载案例:鼠标移入一张图片时,换成另一张图片,移出时换回原来的图片。正常做法是,鼠标移入的时候,改变图片的src,但这时就要去加载图片了,会等待一段时间,这样体验不好。预加载的做法是,在页面加载完,鼠标移入之前就通过Image对象把图片加载进缓存了,这样鼠标移入的时候直接从缓存里读取了,速度很快。
但整体来讲,仍然应该先进行onload事件的绑定, 再赋值src 参考:[前端] 图片预加载及获取属性 关于图片的预加载,你所不知道的 3. 用CSS实现图片的预加载这个概念就是写一个CSS样式设置一批背景图片,然后将其隐藏,这样你就看不到那些图片了。那些背景图片就是你想预载的图片。
这里为了隐藏这些图片, 使用了位置设置为极大的负值的方法. 还可以直接设置 { width: 0; height: 0; display: none}; 该方法虽然高效,但仍有改进余地。使用该法加载的图片会同页面的其他内容一起加载,增加了页面的整体加载时间。为了解决这个问题,我们增加了一些JavaScript代码,来推迟预加载的时间,直到页面加载完毕。代码如下: // better image preloading @ <a href="http:///press/2009/12/28/3-ways-preload-images-css-javascript-ajax/">http:///press/2009/12/28/3-ways-preload-images-css-javascript-ajax/</a> function preloader() { if (document.getElementById) { document.getElementById("preload-01").style.background = "url(http://d/image-01.png) no-repeat -9999px -9999px"; document.getElementById("preload-02").style.background = "url(http://d/image-02.png) no-repeat -9999px -9999px"; document.getElementById("preload-03").style.background = "url(http://d/image-03.png) no-repeat -9999px -9999px"; } } function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } addLoadEvent(preloader); 在该脚本的第一部分,我们获取使用类选择器的元素,并为其设置了background属性,以预加载不同的图片。 该脚本的第二部分,我们使用addLoadEvent()函数来延迟preloader()函数的加载时间,直到页面加载完毕。 如果JavaScript无法在用户的浏览器中正常运行,会发生什么?很简单,图片不会被预加载,当页面调用图片时,正常显示即可。 参考: 纯CSS图片预加载 Javascript图片预加载详解 4. 使用Ajax实现预加载该方法利用DOM,不仅仅预加载图片,还会预加载CSS、JavaScript等相关的东西。使用Ajax,比直接使用JavaScript,优越之处在于JavaScript和CSS的加载不会影响到当前页面。该方法简洁、高效。 window.onload = function() { setTimeout(function() { // XHR to request a JS and a CSS var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://d/preload.js'); xhr.send(''); xhr = new XMLHttpRequest(); xhr.open('GET', 'http://d/preload.css'); xhr.send(''); // preload image new Image().src = "http://d/preload.png"; }, 1000); }; 上面代码预加载了“preload.js”、“preload.css”和“preload.png”。1000毫秒的超时是为了防止脚本挂起,而导致正常页面出现功能问题。 与之相比, 如果用js的话, 要实现以上加载过程则会应用到页面上. 实现如下 window.onload = function() { setTimeout(function() { // reference to <head> var head = document.getElementsByTagName('head')[0]; // a new CSS var css = document.createElement('link'); css.type = "text/css"; css.rel = "stylesheet"; css.href = "http://d/preload.css"; // a new JS var js = document.createElement("script"); js.type = "text/javascript"; js.src = "http://d/preload.js"; // preload JS and CSS head.appendChild(css); head.appendChild(js); // preload image new Image().src = "http://d/preload.png"; }, 1000); };
这里,我们通过DOM创建三个元素来实现三个文件的预加载。正如上面提到的那样,使用Ajax,加载文件不会应用到加载页面上。从这点上看,Ajax方法优越于JavaScript。 |
|