图片延迟加载方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="con" id="con"> <img src="http://e.hiphotos.baidu.com/image/pic/item/730e0cf3d7ca7bcbc648862ebc096b63f624a884.jpg" alt=""> <img src="http://f.hiphotos.baidu.com/image/pic/item/10dfa9ec8a1363277fd6fcbb928fa0ec08fac77a.jpg" alt=""> <img src="http://h.hiphotos.baidu.com/image/pic/item/3b87e950352ac65c27e1741cf9f2b21192138afc.jpg" alt=""> <img src="http://e.hiphotos.baidu.com/image/pic/item/730e0cf3d7ca7bcbc648862ebc096b63f624a884.jpg" alt=""> <img src="http://f.hiphotos.baidu.com/image/pic/item/10dfa9ec8a1363277fd6fcbb928fa0ec08fac77a.jpg" alt=""> <img src="http://h.hiphotos.baidu.com/image/pic/item/3b87e950352ac65c27e1741cf9f2b21192138afc.jpg" alt=""> <img src="http://e.hiphotos.baidu.com/image/pic/item/730e0cf3d7ca7bcbc648862ebc096b63f624a884.jpg" alt=""> <img src="http://f.hiphotos.baidu.com/image/pic/item/10dfa9ec8a1363277fd6fcbb928fa0ec08fac77a.jpg" alt=""> <img src="http://h.hiphotos.baidu.com/image/pic/item/3b87e950352ac65c27e1741cf9f2b21192138afc.jpg" alt=""> <img src="addicon.png" alt="" lazy-src="http://a.hiphotos.baidu.com/image/pic/item/7aec54e736d12f2ee12eb30f4dc2d562853568b1.jpg"> <img src="addicon.png" alt="" lazy-src="http://f.hiphotos.baidu.com/image/pic/item/b7003af33a87e95000f3e10312385343faf2b4fc.jpg"> <img src="addicon.png" alt="" lazy-src="http://b.hiphotos.baidu.com/image/pic/item/55e736d12f2eb938c246679dd7628535e5dd6fb1.jpg"> <img src="addicon.png" alt="" lazy-src="http://e.hiphotos.baidu.com/image/pic/item/b8389b504fc2d562d923cd82e51190ef76c66cb1.jpg"> <img src="addicon.png" alt="" lazy-src="http://a.hiphotos.baidu.com/image/pic/item/b2de9c82d158ccbf5c23f7321bd8bc3eb135411e.jpg"> <img src="addicon.png" alt="" lazy-src="http://h.hiphotos.baidu.com/image/pic/item/fcfaaf51f3deb48f5b6f2cb8f31f3a292df57856.jpg"> <img src="addicon.png" alt="" lazy-src="http://h.hiphotos.baidu.com/image/pic/item/9d82d158ccbf6c816f31a18ebf3eb13533fa4056.jpg"> <img src="addicon.png" alt="" lazy-src="http://b.hiphotos.baidu.com/image/pic/item/8ad4b31c8701a18bdece9f299d2f07082838feab.jpg"> <img src="addicon.png" alt="" lazy-src="http://e.hiphotos.baidu.com/image/pic/item/f31fbe096b63f624e75bb4658444ebf81a4ca356.jpg"> <img src="addicon.png" alt="" lazy-src="http://a.hiphotos.baidu.com/image/pic/item/838ba61ea8d3fd1fb92c2f5c334e251f95ca5fab.jpg"> <img src="addicon.png" alt="" lazy-src="http://g.hiphotos.baidu.com/image/pic/item/b3fb43166d224f4a5ebcfe750af790529822d1ab.jpg"> <img src="addicon.png" alt="" lazy-src="http://a.hiphotos.baidu.com/image/pic/item/14ce36d3d539b6009aeb82d1ea50352ac65cb7ab.jpg"> <img src="addicon.png" alt="" lazy-src="http://b.hiphotos.baidu.com/image/pic/item/43a7d933c895d1439cb3664570f082025baf078a.jpg"> <img src="addicon.png" alt="" lazy-src="http://c.hiphotos.baidu.com/image/pic/item/e61190ef76c6a7ef1cfc2a40fefaaf51f2de66fa.jpg"> <img src="addicon.png" alt="" lazy-src="http://a.hiphotos.baidu.com/image/pic/item/8694a4c27d1ed21b16c8a383ae6eddc451da3f56.jpg"> <img src="addicon.png" alt="" lazy-src="http://h.hiphotos.baidu.com/image/pic/item/8435e5dde71190efb9fd1fb9cd1b9d16fdfa6056.jpg"> <img src="addicon.png" alt="" lazy-src="http://b.hiphotos.baidu.com/image/pic/item/a8ec8a13632762d0863829d9a3ec08fa513dc656.jpg"> <img src="addicon.png" alt="" lazy-src="http://e.hiphotos.baidu.com/image/pic/item/2934349b033b5bb5550da29835d3d539b700bcfa.jpg"> <img src="addicon.png" alt="" lazy-src="http://a.hiphotos.baidu.com/image/pic/item/e1fe9925bc315c60d493e6898eb1cb1349547756.jpg"> <img src="addicon.png" alt="" lazy-src="http://b.hiphotos.baidu.com/image/pic/item/b812c8fcc3cec3fdedfb2513d588d43f8694278a.jpg"> <img src="addicon.png" alt="" lazy-src="http://b.hiphotos.baidu.com/image/pic/item/6a600c338744ebf8031d61cadbf9d72a6159a7d2.jpg"> <img src="addicon.png" alt="" lazy-src="http://g.hiphotos.baidu.com/image/pic/item/64380cd7912397dddf5f47ed5a82b2b7d0a28731.jpg"> <img src="addicon.png" alt="" lazy-src="http://b.hiphotos.baidu.com/image/pic/item/b21bb051f81986189713b26e49ed2e738ad4e680.jpg"> <img src="addicon.png" alt="" lazy-src="http://h.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c20cac95184d6277f9f2ff862.jpg"> <img src="addicon.png" alt="" lazy-src="http://h.hiphotos.baidu.com/image/pic/item/bf096b63f6246b605b85699de8f81a4c500fa254.jpg"> <img src="addicon.png" alt="" lazy-src="http://b.hiphotos.baidu.com/image/pic/item/023b5bb5c9ea15ce5f6339e0b5003af33b87b24e.jpg"> <img src="addicon.png" alt="" lazy-src="http://d.hiphotos.baidu.com/image/pic/item/5bafa40f4bfbfbedf03d96b77bf0f736aec31f95.jpg"> </div> </body> <style type="text/css"> .con{width: 1260px;margin: 0 auto;} img{float: left;width: 400px;height: 400px;margin: 10px;} </style> </html>
js代码：
1 //延迟加载图片 2 var imageloadCurrentWindower = function(container) { 3 //在空闲时循环加载剩余图片工作的定时器 4 var autoLoaderTimer = null; 5 //在空闲时启动加载剩余图片工作的定时器 6 var restartAutoLoaderTimer = null; 7 //图片容器 8 this.container = container || $(document); //容器默认为整个文档 9 //所有图片 10 this.allImages; 11 //初始化延迟加载的图片的信息 12 this.scanLazyImageInfo = function() { 13 allImages = {}; 14 this.container.find('img[lazy-src]').each(function() { 15 var el = $(this); 16 var offset = el.offset(); 17 if (!allImages[offset.top]) { 18 allImages[offset.top] = []; 19 } 20 allImages[offset.top].push(el); 21 }); 22 } 23 //加载当前屏幕中被延迟加载的图片 24 this.loadCurrentWindow = function() { 25 var h1, h2; 26 h1 = this.container.height(); 27 h2 = $(window).height(); 28 var height = this.container.scrollTop() + (h1 > h2 ? h2 : h1); 29 for (var k in allImages) { 30 if (parseInt(k) < height) { 31 loadImages(allImages, k); 32 continue; 33 } 34 break; 35 } 36 } 37 //页面空闲时自动加载未加载的图片 38 this.autoLoad = function() { 39 // 取一行图片加载 40 for (var k in allImages) { 41 loadImages(allImages, k); 42 break; 43 } 44 //取消上一个定时器 45 if (autoLoaderTimer) { 46 clearTimeout(autoLoaderTimer); 47 } 48 //重新生成定时器，1秒后如果页面仍然空闲则加载下一行图片 49 autoLoaderTimer = setTimeout(autoLoad, 1000); 50 } 51 //加载图片 52 loadImages = function(allImages, _key) { 53 var _imgs = allImages[_key]; 54 for (var i = 0, len = _imgs.length; i < len; i++) { 55 var tmpImg = _imgs[i]; 56 tmpImg.attr('src', tmpImg.attr('lazy-src')); 57 tmpImg.removeAttr('lazy-src'); 58 } 59 delete allImages[_key]; 60 } 61 //扫描所有被延迟加载的图片信息 62 this.scanLazyImageInfo(); 63 //加载当前窗口中的图片 64 this.loadCurrentWindow(); 65 //监视当前容器的滚动条滚动事件 66 this.container.scroll(function() { 67 loadCurrentWindow(); 68 }); 69 //监视窗口的尺寸改变事件 70 $(window).resize(function() { 71 scanLazyImageInfo(); 72 loadCurrentWindow(); 73 }); 74 //监视页面是否空闲,以鼠标是否移动为标志 75 $(document).mousemove(function() { 76 //清除空闲时自动加载图片的定时器 77 clearTimeout(autoLoaderTimer); 78 //如果存在清除重启空闲时自动加载图片的定时器 79 if (restartAutoLoaderTimer) clearTimeout(restartAutoLoaderTimer); 80 //重新生成重启空闲时自动加载图片的定时器 81 restartAutoLoaderTimer = setTimeout(function() { 82 autoLoad(); 83 }, 5000); 84 }); 85 //启动自动加载当前屏幕外图片 86 this.autoLoad(); 87 }
调用：
$(function(){ //启动延迟加载,支持$(document) imageloadCurrentWindower($("#con")); });
有jquery依赖
