页面加载完，再加载图片

lanzengquan

已于 2023-09-02 15:14:08 修改

阅读量133

点赞数

文章标签： javascript 前端开发语言

于 2023-09-02 15:12:49 首次发布

原文链接：http://jsrun.net/note/DXKKp

版权

先加载一张小图，把大图地址存在data-src属性里，等页面加载完成后，取到大图地址，然后用image对象加载，等加载完成后再把图片地址替换成大图地址

<div class="img-con" id="imgCon">
        <img src="./img/1_small.jpg" data-src="./img/1_big.jpeg" alt="图片1" id="img">
        <img src="./img/2_small.jpg" data-src="./img/2_big.jpg" alt="图片2" id="img">
        <img src="./img/3_small.jpg" data-src="./img/3_big.jpg" alt="图片3" id="img">
        <img src="./img/4_small.jpg" data-src="./img/4_big.jpg" alt="图片4" id="img">
        <img src="./img/5_small.jpg" data-src="./img/5_big.jpg" alt="图片5" id="img">
    </div>
    <script>
        window.onload = function() {
            var imgCon = document.getElementById('imgCon')
            var imgs = imgCon.getElementsByTagName('img')
            for (var i = 0; i < imgs.length; i++) {

                (function(curImg) {
                    var tempImg = null;
                    tempImg = document.createElement('img')
                    console.log(curImg)
                    tempImg.src = curImg.dataset.src;
                    tempImg.onload = function(e) {
                        curImg.src = tempImg.src
                        curImg.style.filter = 'blur(0px)'
                    }
                })(imgs[i])
            }
        }
    </script>