javascript - 简单实现一个图片延迟加载的jQuery插件
最近在看一本书《Third-Party Javascript》很不错，推荐给大家，下载地址各位自己搜索了。
步骤：
1.打开google，鉴于google基本打不开，那么就打开这个网址吧。http://www.aol.com
2.搜索third party javascript filetype:pdf 一般都可以下载到电子书了。目前只有英文版。
这书中有一章讲到了提高app的效率，其中有一点就是延迟加载初始化不需要的资源，结合书中给出的部分代码，我这里简单的弄了一个jQuery的插件。
首先是js代码jquery.lazyloading.js。
1 /** 2 * @author huangjacky 3 * @date 2014-10-14 4 * @version 1.0 5 * @email [email protected] 6 * @description 7 */ 8 'use strict'; 9 (function ($) { 10 $.fn.extend({ 11 lazyloading: function (opt) { 12 var defaults = { 13 delay: 0 14 }; 15 var self = this; 16 var options = $.extend(defaults, opt); 17 var getWindowInfo = function () { 18 if ("pageYOffset" in window) { 19 return { 20 x: window.pageXOffset, 21 y: window.pageYOffset, 22 w: window.innerWidth, 23 h: window.innerHeight 24 } 25 } else { 26 var el = document.documentElement; 27 return { 28 x: el.scrollLeft, 29 y: el.scrollTop, 30 w: el.clientWidth, 31 h: el.clientHeight 32 } 33 } 34 35 }; 36 var check = function () { 37 var t = getWindowInfo(); 38 self.each(function (idx) { 39 var $this = $(this); 40 var left = 0; 41 var top = 0; 42 var el = this; 43 while (el && el.offsetParent) { 44 left += el.offsetLeft; 45 top += el.offsetTop; 46 el = el.offsetParent; 47 } 48 if ( 49 left > t.x && left < t.x + t.w && 50 top > t.y && top < t.y + t.h 51 ) {//开始正式加载 52 var href = $this.data("href"); 53 if ($this.is("img")) { 54 if (options.delay > 0) { 55 setTimeout(function () { 56 $this.attr("src", href); 57 }, options.delay); 58 } else { 59 $this.attr("src", href); 60 } 61 } else if ($this.is("div")) { 62 if (options.delay > 0) { 63 setTimeout(function () { 64 $this.load(href); 65 }, options.delay); 66 } else { 67 $this.load(href); 68 } 69 } 70 } 71 }); 72 }; 73 $(window).on("scroll", function (evt) { 74 check(); 75 }); 76 check(); 77 } 78 }); 79 })(jQuery);
JS的代码并不难，主要是绑定window的onScroll事件，然后遍历判断所选择的元素是否在界面范围内。
接下来看看怎么使用，lazy.html的代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="js/jquery-2.1.0.js"></script> 7 <script src="js/jquery.lazyloading.js"></script> 8 <style> 9 .my-block { 10 height: 500px; 11 width: 100%; 12 } 13 14 .red { 15 background-color: red; 16 } 17 18 .blue { 19 background-color: blue; 20 } 21 22 img { 23 width: 100px; 24 height: 100px; 25 border: 1px solid red; 26 } 27 </style> 28 </head> 29 <body> 30 <div class="my-block red"></div> 31 <div class="my-block blue"></div> 32 <div class="my-block red"></div> 33 <img src="#" data-href="images/logo.png"> 34 <script> 35 $("img").lazyloading(); 36 </script> 37 </body> 38 </html>
是不是很简单？这样图片默认显示src的内容，只有滚动到它的时候才会显示data-href中定义的图片。
代码中还有很多逻辑没有实现，各位见谅。