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(下拉)等,常用fadeIn
threshold: 200, // 提前开始加载
// threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
event: 'click', // 事件触发时才加载
// event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
container: $("#container"), // 对某容器中的图片实现效果
// container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
failurelimit : 10 // 图片排序混乱时
// failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
});