JS 原生图片懒加载

CodeMonkey21

已于 2023-04-15 17:31:55 修改

阅读量618

点赞数

分类专栏：前端文章标签： javascript 懒加载

于 2019-05-28 15:30:02 首次发布

本文链接：https://blog.csdn.net/weixin_40772969/article/details/90640357

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

先拿一张比较小的图片放到img标签中的src中，把真正的图片地址放到data-src属性中。
主要原理是，判断图片距离页面顶部的距离offsetTop，是否小于页面可见高度document.documentElement.clientHeight+滚动条垂直滚动像素window.scrollY

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
            width: 500px;
            margin: 0 auto;
        }
        img{
            display: block;
            width: 100%;
            /* height: 200px; */
        }
    </style>
</head>
<body>
    <div class="container">
        <img data-src="./lazyLoadPic/ars1.jpg" src="./lazyLoadPic/default.png" alt="">
        <img data-src="./lazyLoadPic/ars2.jpg" src="./lazyLoadPic/default.png" alt="">
        <img data-src="./lazyLoadPic/ars3.jpg" src="./lazyLoadPic/default.png" alt="">
        <img data-src="./lazyLoadPic/ars4.jpg" src="./lazyLoadPic/default.png" alt="">
        <img data-src="./lazyLoadPic/ars5.jpg" src="./lazyLoadPic/default.png" alt="">
        <img data-src="./lazyLoadPic/ars6.jpg" src="./lazyLoadPic/default.png" alt="">
        <img data-src="./lazyLoadPic/ars7.jpg" src="./lazyLoadPic/default.png" alt="">
    </div>
    <script>
    	//如果不加 window.onload 则在第一次加载页面时发现所有图片已经加载完毕了，并没有实现懒加载效果
        //这是一个坑，不好百度，原因就是没有 window.onload 的情况下所有img都没有高度，所以不能实现懒加载
        window.onload = function(){
            var num = document.getElementsByTagName('img').length
            var img = document.getElementsByTagName('img')
            var n = 0 //用来存储图片加载到的位置，避免每次都从第一张图片开始遍历
            lazyLoad() //页面载入完毕加载可视区域内的图片

            //函数节流模式，如果存在高频率滚动，会给浏览器造成一定的负担，所以设定每隔500ms才能渲染一次
            var canRun = true
            window.onscroll = function(){
                if (!canRun){
                    return
                }
                canRun = false
                setTimeout(function(){
                    lazyLoad()
                    canRun = true
                },500)
            }

            function lazyLoad(){
                var seeHeight = document.documentElement.clientHeight //可见区域高度
                var scrollTop = window.scrollY //滚动条距离顶部高度
                for (var i = n; i < num; i++){
                    //如果图片与页面顶部的距离小于*页面可见高度*与*滚动条距离顶部的高度*之和
                    if (img[i].offsetTop < seeHeight + scrollTop){
                        if (img[i].getAttribute("src") == "./lazyLoadPic/default.png"){
                            img[i].src = img[i].getAttribute("data-src")
                        }
                        n = i + 1
                    }
                }
            }
        }
    </script>
</body>
</html>