自己动手，写自己的lazyload，让插件凉快去——网站优化之图片延时加载

最近一个项目里，遇到一个这样的需求：这是一个WEBAPP应用，应用所有的逻辑都聚焦在一个页面内，客户要求1.页面加载速度要快，2页面响应要快。3.这个页面只能一屏，不能出现滚动条。因此这个页面包含了大量的弹出层的操作。

由于这个页面中，坑爹地包含了136张图片，主要是很多LOGO类的小图片。以前已经通过后台对LOGO类图片进行压缩，使图片尺寸有了一定地变小，但数量众多，页面还是很大。

由于不是每张图片都是一定会看到的，需要用户主动查看才会看到图片，因此，图片决定采用延时加载。之前听过LAZYLOAD，但是由于这个项目没有滚动条，lazyload在这里水土不服，于是便自己来写一个专属于自己的lazyload

实现思路是：

1.项目内的所有img，默认src都是一个1px*1px的grey.gif图片，并将真实的图片路径存在 data-original属性中。

2.当img出现时，将src中的内容替换成 data-original的内容。

下面是代码

HTML代码

<img src="/Public/images/grey.gif"  class="lazy"  data-original="/Public/attached/image/20160314/temp/20160314104045_80246jpg160x160.jpg"/>

<pre name="code" class="html" style="font-size:18px; line-height: 24px;"><img src="/Public/images/grey.gif"  class="lazy"  data-original="/Public/attached/image/20160314/temp/20160314104055_80244jpg160x160.jpg"/>

在图片出现事件中，加上更换SRC的操作

var list=$("#"+id+" .lazy").each(function(){		
		$(this).attr("src",$(this).attr('data-original'));
	});

经过这样处理，整个页面的图片基本是出现时才加载，首次加载节省了一半多的体积。

在实际工作中，高精尖的有难度技术不一定是好技术，能解决实际问题的技术，哪些再简单，也是好技术。