记录一
整体思路:
- 设置个data-original(自定义一个属性)来存放真实地址
- 当滚动页面时,检查所有的img标签,看是否出现在视野中,如果已经出现在了视野中,那继续再进行判断,看其是否已经被加载过了,如果还没有被加载过,那就进行加载。
代码:
lazyRender();
var clock; //优化思路是当鼠标滚轮停止滚动的时候,再去判定是否存在在视野中,而不是滚动过程中一直触发。
$(window).on('scroll',function () {//当页面滚动的时候绑定事件
if (clock) { // 如果在300毫秒内进行scroll的话,都会被clearTimeout掉,setTimeout不会执行。
// 如果有300毫秒外的操作,会得到一个新的timeID即clock,会执行一次setTimeout,然后保存这次setTimeout的ID,
// 对于300毫秒内的scroll事件,不会生成新的timeID值,所以会一直被clearTimeout掉,不会执行setTimeout.
clearTimeout(clock);
}
clock = setTimeout(function () {
console.log('运行了一次');
lazyRender();
},200)
})
function lazyRender () {
$('img.lazy-load').each(function () {
if (checkShow($(this)) && !isLoaded($(this)) ){
loadImg($(this));
}
})
}
function checkShow($img) { // 传入一个img的jq对象
var scrollTop = $(window).scrollTop(); //即页面向上滚动的距离
var windowHeight = $(window).height(); // 浏览器自身的高度
var offsetTop = $img.offset().top; //目标标签img相对于document顶部的位置
if (offsetTop < (scrollTop + windowHeight) && offsetTop > scrollTop) { //在2个临界状态之间的就为出现在视野中的
return true;
}
return false;
}
function isLoaded ($img) {
return $img.attr('data-original') === $img.attr('src'); //如果data-src和src相等那么就是已经加载过了
}
function loadImg ($img) {
$img.attr('src',$img.attr('data-original')); // 加载就是把自定义属性中存放的真实的src地址赋给src属性
}
文章来源:https://www.jianshu.com/p/1b32e16ed0e5
记录二
引入插件:jquery.lazyload.js
<script type="text/javascript" src="static/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="static/jquery.lazyload.min.js" ></script> 点击下载
<img class="lazy-load" data-original="images/dia_banner.png" alt=""/>
$(function() {
placeholder : "images/test.jpg", // placeholder,待图片加载时,占位图则会隐藏
effect: "fadeIn", // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
threshold: 200, // threshold,值为数字,如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,
event: 'click', // event,加载图片条件,值有click(点击),mouseover(鼠标划过),sporty(运动的),scroll(默认滚动)
container: $(".home"), // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,拉动某DIV的滚动条时依次加载图片
failurelimit : 10 // failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
});