js实现图片的懒加载(jquery)

一、原理

  1. 在浏览器滚动的时候,遍历所有图片,若图片在视窗可视区域,则加载该图片
  2. 将图片地址存放在自定义属性中(data-src),需要加载图片再从中取出来
  3. 判断图片可见:
    • 图片上部分进入可视窗体

windowHeight + scrollTop > offsetTop
- 图片下部分进入可视窗体

offsetTop + nodeHeight > scrollTop

二、如何实现

  1. 需要用到4个高度
let windowHeight = $(window).height(),//视窗高度
        scrollTop = $(window).scrollTop(),//滚动条滚动距离
        offsetTop = $node                        //图片相对于文档的垂直坐标
            .offset()
            .top,
        nodeHeight = $node.height();    //图片高度
  1. 判断图片可见
if (windowHeight + scrollTop > offsetTop && offsetTop + nodeHeight > scrollTop) {
        return true;
    } else {
        return false;
    }
  1. 方法:是否显示该图片
const isShow = ($node) => {
    let windowHeight = $(window).height(),
        scrollTop = $(window).scrollTop(),
        offsetTop = $node
            .offset()
            .top,
        nodeHeight = $node.height();
    if (windowHeight + scrollTop > offsetTop && offsetTop + nodeHeight > scrollTop) {
        return true;
    } else {
        return false;
    }
}
  1. 方法:遍历所有图片,加载没有load类名且isShow返回true的图片(加载前给图片加类名load)
const loadImgs = ()=>{
    console.log('1');
    $('.wrapper img').not('.load').each(function(index){
    console.log('2');
        let $node = $(this);
        if(isShow($node)){
            $node.addClass('load');
            $node.attr('src',$node.attr('data-src'));
        }
    });
}
  1. 最后,监听屏幕滚动事件,并在一开始进入界面时加载图片
loadImgs();
$(window).scroll(function () {
    loadImgs();
})

三、 附上代码和效果

推荐阅读更多精彩内容

  • 1.如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible...
    Rising_suns阅读 101评论 0 0
  • html结构 (Emmet) (div.box>div.pic>img[src="images/$.jpg"])*...
    LaBaby_阅读 232评论 0 0
  • 一、关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多。比如说光棍节很疯狂的淘宝商城页面。 这...
    四季变幻阅读 586评论 0 6
  • 之前对预加载的实现方案做了介绍,这一篇文章主要是我对图片的懒加载的实现的一个总结。主要包括: 视区检测 图片懒加载...
    small_a阅读 2,278评论 3 24
  • 记忆就像手中得水,无论你怎样紧握它都会顺着指缝悄然流走,时间也不会因谁而停留,然刹那芳华却能勾起无限的遐想与永恒...
    青衣候小峰阅读 60评论 0 0