浏览器先渲染图片后渲染文字

最新推荐文章于 2024-10-24 18:04:06 发布

绿箩

最新推荐文章于 2024-10-24 18:04:06 发布

阅读量1k

点赞数

分类专栏： js 文章标签：浏览器图片

本文链接：https://blog.youkuaiyun.com/qq_26212731/article/details/78115921

版权

js 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种通过懒加载技术优化网页渲染顺序的方法，避免图片预加载影响用户体验。具体实现包括将图片源地址设为空，并利用JavaScript在页面加载完成后动态填充图片地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天写页面的时候发现，浏览器渲染页面的时候先渲染图片，在渲染文字，这就影响视觉效果了。

搜了一圈，发现一个懒加载方法比较简单有效。

大致流程是图片src属性设置为空（src = “”），然后页面onload的时候，再给img添加src属性值。

1、html

<div class="single_bottom">
                <img src="" alt="二维码">
</div>

2、css代码部分，设置img初始状态display: none,后面图片加载完成之后在显示出来，不然图片会有一个占位的框先出来，影响页面效果；

img{
  display: none;
}

3、js代码如下，先把所有img的src属性值存在一个数组中，然后页面加载后，再给src加上

  window.onload = function () {
        var arrS =['img/s2.png','img/s3.png','img/s_btn_bg.png','img/s1.png'];
        var imgA = document.getElementsByTagName('img');
        for(var i = 0;i<imgA.length;i++){
            imgA[i].setAttribute('src',arrS[i]);
        }
        $("img").on("load",function(){this.style.display="inline-block"})
    }

完整代码如上，js写的比较初级，还在努力中。。。。。。