js图片加载

最新推荐文章于 2024-02-12 09:00:00 发布

魏同学.

最新推荐文章于 2024-02-12 09:00:00 发布

阅读量868

点赞数 1

本文链接：https://blog.csdn.net/weixin_47627529/article/details/106814076

版权

图片懒加载
图片懒加载原理：前端工程师在做页面优化的时候，如果页面中是类似图片列表的结构，会考虑使用懒加载技术来优化页面的加载速度
在这里插入图片描述
在html页面里写，把js引入html页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .div{
        width: 500px;
        margin: 0 auto;
    }
    img {
        height: 100%;
        width: 300px;
        float: left;
        border: 1px solid #000;

    }
</style>
<body>
    <div class="div">
        <img src="./img/loading.jpg" alt="" data-src="./img/1_05.jpg">
        <img src="./img/loading.jpg" alt="" data-src="./img/1_07.jpg">
        <img src="./img/loading.jpg" alt="" data-src="./img/1_09.jpg">
        <img src="./img/loading.jpg" alt="" data-src="./img/1_11.jpg">
        <img src="./img/loading.jpg" alt="" data-src="./img/1_13.jpg">
        <img src="./img/loading.jpg" alt="" data-src="./img/1_15.jpg">
        <img src="./img/loading.jpg" alt="" data-src="./img/1_09.jpg">
    </div>
</body>
<script src="./tu.js"></script>
</html>

js代码

function ljz() {
    var image = document.getElementsByTagName('img')
    var offsetTop = 0
    var img1 = []
    for (let i = 0; i < image.length; i++) {
        var ele = image[i]
        if (ele.getAttribute("data-src")) {
            if (han(ele)) {
                ele.src = ele.getAttribute('data-src');
            } else {
                img1.push(ele)
            }
        }
    }
    var img2 = img1.length

    function add() {
        for (let j = 0; j < img2; j++) {
            var el = img1[j]
            if (han(el)) {
                (function (el) {
                    setTimeout(function () {
                        console.log(el)
                        el.src = el.getAttribute('data-src');
                    }, 2000)
                })(el)
                img1.splice(j, 1);
                img2--;
                if (img2 === 0) {
                    window.removeEventListener("scroll", add, false)
                }
            }
        }
    }

    function han(ele) {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var cliteHeight = document.documentElement.clientHeight + 30
        var height = cliteHeight + scrollTop
        var offsetTop = ele.offsetTop
        return (offsetTop < height)
    }
    window.addEventListener("scroll", add, false)
}
ljz()

魏同学.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js图片加载

图片懒加载图片懒加载原理：前端工程师在做页面优化的时候，如果页面中是类似图片列表的结构，会考虑使用懒加载技术来优化页面的加载速度在html页面里写，把js引入html页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
复制链接

扫一扫