懒加载常用的两种方式

技术实现:到可视区域再加载

第一种

引入 jquery.lazyload.js

//谁使用谁启动懒加载

//$("img.lazy").lazyload();

$("img.lazy").lazyload({effect:"fadeIn"});

//实际上只是把src换成data-original

data-original="image/timg.jpg"alt="" width="400" height="400">

第二种

轻量级的图片延时加载插件echo.js，如果你的项目中没有使用jquery，建议使用第二种方式

<divclass="demo">

<imgclass="lazy"src="images/blank.gif"data-echo="images/big-1.jpg">

div>

说明：blank.gif是一张背景图片，包含在插件里了。图片的宽高必须设定，当然，可以使用外部样式对多张图片统一控制大小。data-echo指向的是真正的图片地址。