前端图片加载速度过慢导致图片抖动问题

最新推荐文章于 2024-05-18 08:00:00 发布

余生皆假期-

最新推荐文章于 2024-05-18 08:00:00 发布

阅读量1.3k

点赞数 1

分类专栏： # 前端杂谈文章标签：前端

本文链接：https://blog.csdn.net/nullccc/article/details/126273906

版权

前端杂谈专栏收录该内容

5 篇文章 0 订阅

订阅专栏

从上图中，可以发现文字与图片存在明显的抖动现象。

原因分析

因为没有给图片预设值宽度，导致浏览器已经渲染好页面其他元素后，再通过外链获得图片资源。此时浏览器才刚刚知道图片资源的高度，会重新计算，并进行重绘，所以会出现抖动现象。

解决办法 1

通过预先给图片设置高度：

 <img height="400px" src="http://xxxxx">

这样可以提前预设高度，可是不能满足图片自适应的要求。

解决方式 2

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<style>
    div{
        height: 0;
        overflow: hidden;
        padding-bottom: 25.4%;
    }

    img{
        width: 100%;
    }
</style>

<div>
 <img src="http://www.dell-lee.com/imgs/vue3/banner.jpg">
</div>
<p>文本啊文本</p>

padding和margin的值为百分比时，无论padding-top||padding-bottom||padding-left||padding-right是根据父元素的宽度进行设置的。根据这个性质，可以利用padding-top和padding-bottom作为占位符。

做法很简单，就是img外面加一个div，并进行如下设置，width和padding-bottom设置图片的宽高比。

案例中图片宽度为 1528*388，其宽高比约为 25.4%。