1、在使用jquery.lazyload.js时，如果是数据直接在DOM节点直接渲染，并且图片排列规则，使用方法：
给img标签添加的属性有：
<img class="lazy" src="__TEMP__/{$style}/public/images/load_banner.jpg" data-original="{:__IMG($v.adv_image)}" alt="">
src可以修改图片还没加载的时候展示的图片
例如：
html:
{foreach name="$zhuanqu[2][0]['goods_detail']" item="v"}{if $key<4}<li><a href="{:__URL('APP_MAIN/goods/goodsdetail?id='.$v.goods_id)}"><div class="goods-img"><img class="lazy" src="__TEMP__/{$style}/public/images/load_good.jpg" data-original="{:__IMG($v.pic_cover_small)}" alt=""></div><p class="goods-name">{$v.goods_name}</p><p class="goods-price">{$v.price}</p></a></li>{/if}{/foreach}
script:
//图片懒加载$.fn.myLazyLoad = function() {this.lazyload();};$("img.lazy").myLazyLoad();
2、如果是通过ajax动态获取的，使用方法：
var getData=function(s,scope){$.ajax({url: '<{$base_url}>/index.php/openapi/recommend/get_p?s=' + s,type: 'get',data: {},dataType: 'json',success: function (res) {var data = res.data;var html = '';if (res.data == '') {//不输出内容} else {for (var i = 0; i < data.length; i++) {var item = data[i];html += '<div class="dty"><a class="item_link" href="/m/item-' + item.product_id + '.html"><div class="set_i"><img class="lazy" src="/themes/mobile/shanyaohui/images/loading_img.gif" data-original="' + item.image_default_id + '"></div>';html += '<p class="tit">' + item.name + '</p>';html += '<span>￥<del class="fr">' + Number(item.mktprice).toFixed(2) + '</del></span></br>';html += '<p class="am-fl fl">￥' + Number(item.price).toFixed(2) + '</p>';html += '<p class="am-fr fd">已售' + item.buy_num + '笔</p>';html += '</a></div>';}scope.append(html);$("img").myLazyLoad();//数据渲染后初始化}}, error: function () {console.log('ajax error')}});}// 图片懒加载$.fn.myLazyLoad = function() {this.lazyload();};$("img.lazy").myLazyLoad();}}, error: function () {console.log('ajax error')}});}// 图片懒加载$.fn.myLazyLoad = function() {this.lazyload();};$("img.lazy").myLazyLoad();
3、如果图片排列混乱，导致图片加载出错或者加载不出来，可设置参数：
$("img.lazy").lazyload({placeholder : "img/grey.gif", //用图片提前占位// placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏effect: "fadeIn", // 载入使用何种效果// effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeInthreshold: 200, // 提前开始加载// threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉event: 'click', // 事件触发时才加载// event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…container: $("#container"), // 对某容器中的图片实现效果// container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片failurelimit : 10 // 图片排序混乱时// failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.});
