欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS 图片懒加载

程序员文章站 2022-07-10 21:15:27
所谓懒加载就是在图片进入 *可视区域* 前,用 *同一张* 图片作为图片的 src 属性值,这样可减少请求及带宽。懒加载的重点是:判断元素是否进入可视区域?元素距离文档顶部高度(这个值固定不变) - 整个文档被滚动高度(浏览器滚动条向下滚动高度) <= 可视高度,表示元素进入可视区域Demo:

 

所谓懒加载就是在图片进入 *可视区域* 前,用 *同一张* 图片作为图片的 src 属性值,这样可减少请求及带宽。懒加载的重点是:判断元素是否进入可视区域?

元素距离文档顶部高度(这个值固定不变) - 整个文档被滚动高度(浏览器滚动条向下滚动高度) <= 可视高度,表示元素进入可视区域

demo:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>懒加载</title>
    <style type="text/css">
        * { padding: 0; margin:0; }
        img { display: block; height: 171px;}
    </style>
</head>
<body>
    <img src="../site/images/users_avatar/user1.png" data-loaded="1">
    <img src="../site/images/users_avatar/user2.png" data-loaded="1">
    <img src="../site/images/users_avatar/user3.png" data-loaded="1">
    <img src="../site/images/users_avatar/user4.png" data-loaded="1">
    <img src="../site/images/users_avatar/user5.png" data-loaded="1">
    <img src="../site/images/loading-1.gif" data-loaded="0">
    <img src="../site/images/loading-1.gif" data-loaded="0">
    <img src="../site/images/loading-1.gif" data-loaded="0">
    <img src="../site/images/loading-1.gif" data-loaded="0">
    <img src="../site/images/loading-1.gif" data-loaded="0">
    <img src="../site/images/loading-1.gif" data-loaded="0">
    <img src="../site/images/loading-1.gif" data-loaded="0">
    <img src="../site/images/loading-1.gif" data-loaded="0">
    <img src="../site/images/loading-1.gif" data-loaded="0">
    <img src="../site/images/loading-1.gif" data-loaded="0">
    <img src="../site/images/loading-1.gif" data-loaded="0">
</body>
<script type="text/javascript">
    window.onload = function () {
        window.onscroll = function () {
            // 重点:判断元素是否进入可视区域?
            // 元素距离文档顶部高度(这个值固定不变)减去
            // 整个文档被滚动高度(浏览器滚动条向下滚动高度)
            // 小于等于可视高度,表示元素进入可视区域
            var images = document.queryselectorall('img');
            var scroll_h = document.documentelement.scrolltop;
            var visual_h = window.innerheight;
            // 实现等待加载效果
            settimeout(function() {
                for (var i = 5; i < images.length; i++) {
                    if (images[i].getattribute('data-loaded') === '0'
                        && images[i].offsettop - scroll_h <= visual_h
                        ) {
                            images[i].src = "../site/images/users_avatar/user" + (i + 1) + ".png";
                            images[i].setattribute('data-loaded', '1');
                    }
                }
            }, 550);
        }
    }
</script>
</html>