HTML图片懒加载

最新推荐文章于 2025-10-31 14:42:33 发布

转载最新推荐文章于 2025-10-31 14:42:33 发布 · 3.2k 阅读

文章标签：

#html #jquery #图片

Jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种提高网页加载速度的技术——图片懒加载。通过在img标签中使用data_src属性存放图片链接，并利用JS判断图片是否进入可视区域来动态加载图片，从而减少初始加载时间。

现在的网站越来越花哨, 图片加载越来越多, 这样加载速度就会越来越慢了, 因此, 图片懒加载就很流行咯~

1. 把img标签中的src属性删掉, 此时, 添加属性 data_src, 把图片链接放在该属性下

2. 通过使用img标签添加背景图片, 充当懒加载前的显示图片

3. 当该img标签在浏览器显示区内时, 通过js实现把img标签中的data_src的链接赋值到img标签中的src属性
注: 浏览器显示区如何判断

JS code

// 页面懒加载
function loadlazy(){
    var itv = setTimeout(function(){
        var winHeight = $(window).height();
        var scrolltop = $(window).scrollTop();
        $('.lazyload-img').each(function(){
            var oTop = $(this).offset().top;
            if((oTop-scrolltop) >= 0 && (oTop-scrolltop)<winHeight){
                var src = $(this).attr("data_src");
                $(this).attr("src",src);
            }
        })
    },100);
}
    
// 页面滚动加载
$(window).scroll(function(){
    loadlazy();
}
 
// 页面加载完成
$(function() {
    loadlazy();