图片延迟加载简单实现

js

图片往往是造成网页加载缓慢的原因，通过延迟图片的加载可以提高用户体验，优先加载重要的内容。

tree

christina

1.使用data-src属性代替img的src属性

<div class="wrapper">
        <img data-src="./img/lazy.jpg" alt="lazy.jpg">
</div>
/*先将待加载图片隐藏，加载完成后显示*/
img {
        opacity: 1;
        transition: opacity 0.2s;
    }
    
    img[data-src] {
        opacity: 0;
    }

说明：img标签并不会将图片嵌入到网页中，而是提供一个占位符即给图片提供一个显示的空间。图片的显示需要浏览器根据src属性来加载。所以上述方式并不会加载图片。

2.当html文档加载完成后通过js将img的data-src属性转换为src,从而加载图片

/*原生js实现*/
[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
        img.setAttribute('src', img.getAttribute('data-src'));
        img.onload = function() {
        	/*图片加载完成后data-src属性就可以去掉了*/
            img.removeAttribute('data-src');
        };
    });
/*jQuery实现*/
$('img[data-src]').each(function(){
    var $img = $(this);
    $img.attr('src', $img.attr('data-src'));
    $img.load(function(){
        $img.removeAttr('data-src');
    })
});

说明：遍历所有包含data-src属性的img元素然后将data-src属性转换为src属性

Prev Next