当前位置:网站首页 > 学习笔记  > jQuery实现图片懒加载

jQuery实现图片懒加载

作者:陈子文 时间:2022-06-16 10:03:51 阅读数:0人阅读

什么是图片懒加载


当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),当图片出现在浏览器的可视区域内时,才设置图片真正的路径,让图片显示出来。这就是图片懒加载。

通俗一点: 

1、就是创建一个自定义属性data-src存放真正需要显示的图片路径,而img自带的src放一张大小为1 * 1px的图片路径。 

2、当页面滚动直至此图片出现在可视区域时,用js取到该图片的data-src的值赋给src。 ps:自定义属性可以取任何名字

HTML代码如下:

<img data-src="真正要加载的图片地址" src="这个是占位图,如等待加载图" >

jq代码:

<script>

start()

$__(window).on('scroll', function(){
    start()
})

function start(){
    $('.pics_content img').not('[data-isLoaded]').each(function(){
        var $node = $(this)
        if( isShow($node) ){
            loadImg($node)
        }
    })
}
 
//判断一个元素是不是出现在窗口(视野)
function isShow($node){
    return $node.offset().top <= $(window).height() + $(window).scrollTop()
}

//加载图片
function loadImg($img){
    $img.attr('src', $img.attr('data-src')) //把data-src的值 赋值给src
    $img.attr('data-isLoaded', 1)//已加载的图片做标记
}
</script>


本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:821266862@qq.com

标签:
评论一下