登录

js图片延迟加载,懒加载(lazyload.js)

我来纠错
//图片src属性改成data-original
<img class="lazy" data-original="img/example.jpg" width="640" height="480">

//依赖jquery
<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>

//调用方法
$(function() {
    $("img.lazy").lazyload();
});

//更多自定义配置
$("img.lazy-load").lazyload({ 
	effect : "fadeIn", //渐现,show(直接显示),fadeIn(淡入),slideDown(下拉)
	threshold : 180, //预加载,在图片距离屏幕180px时提前载入
	event: 'click',  // 事件触发时才加载,click(点击),mouseover(鼠标划过),sporty(运动的),默认为scroll(滑动)
	container: $("#container"), // 指定对某容器中的图片实现效果
	failure_limit:2 //加载2张可见区域外的图片,lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况
}); 
jquery.lazyload.js下载地址
发送
热门关键词:
命令
知识类型:
标题描述:
详细解答:

提交审核您编辑的知识会经过 前端大牛 人工审核。