chrome中image图片预留位置的问题

在项目中发现,当设置 <img src="" width="100" height="100"> 通过设置img的width属性和height属性在img未请求回来之前为其预留位置。

浏览器在渲染时会为这张图片预留出100px*100px的的位置,等待图片的加载。这种方式可以避免图片错乱的问题,同时避免因为图片而造成的页面重排。

但问题是在chrome浏览器中,这种策略并没有生效。其它主流浏览器均正常。

解决hack方案是:为该图片包裹一层span并设置为inline-block。但这种方式增加了代码,并且破坏了html的结构化。

原文地址:https://www.cnblogs.com/charling/p/3373001.html