在一次项目中需要做一个电子书，然后再网上找了一个电子书的模板，但我所做的项目时电子版的图刊，需要加载有不少图片，当完成后上传了100多张图片，这时发现加载很慢 ，成效要很长时间才出来，这是我就想到了我以前一个项目当时也是由于网站首页图片太大太多，js插件也多致使首页打开速度奇慢无比 ，后来用图片懒加载稍微优化了一下发现成效还很好，当时是计划用jquery.lazyload.js 去做的，试了半天都发现效果不好于是就自己写了一个简单的图片的懒加载。思路跟网上大伙说的差不多，就是在img标签上放一张临时图片 然后概念一个data|img 的属性，然后自己更具网站的实质需要写 替换图片的事件， 我这里是电子书 做的点击事件。
$(#next|page|button).click(function() {var dong|num= $(this).data(num);var all|num = dong|num+5;$(this).data(num,all|num);$(.lazy).each(function() {var $img = $(this);var img|num = $img.data(num);if (img|num = all|num) {var dong|num = $img.data(img);$img.attr(src,dong|num);}});});这里是想法是首次加载只展示5张 然后没触发一次事件就去判断目前的data|num值， 提前加载5张，把num的值小于目前数值num的img标签内的默认图片都替换为需要展示的图片。然后把点击事件上的num值改成目前判断的值，做好下次事件的数值判断。这是一个简单例子，期望能给你们一些解决问题想法。当然假如网站的布局有规律也可以尝试用jquery.lazyload.js推荐一个lazyload.js解析https://www.cnblogs.com/yzg1/p/5051554.htmllazyload.js下载地址是github上的https://codeload.github.com/tuupola/lazyload/legacy.zip/1.9.3
