最近写公司的项目的时候遇到一个关于图片加载的问题,所做的页面是一个商城的商品列表页,其中需要显示商品图片,名称等信息,因为商品列表可能会很长,所以其中图片需要滑到可以显示的区域再进行加载。 首先我的图片加载插件使用的是jquery的lazyload, **一般情况下:** 使用lazyload,只需要引入相关文件(当然jquery也要提前引入) <script src="../js/jquery.lazyload.js"></script> 然后在HTML的img标签中加入类名:lazy,图片的地址使用:data-original = “XXXXXXXXX”,最后再js中加上
$(function(){ $("img.lazy").lazyload({ effect: "fadeIn", container: $("#lazycontainer") }); })
这里设置了图片加载进来显示是渐现的效果,以及包裹整个商品列表的容器container