刷新页面时出现图像故障

Posted 2023-05-08

【中文标题】刷新页面时出现图像故障

【英文标题】：Image Glitch when refresh the page

【发布时间】：2021-05-30 08:26:15

【问题描述】：

当我刷新页面时，我可以看到图像故障。

#html

<img id="profileIcon" class="img-circle" src="/assets/be/img/norden/6.JPG?q=0.13941100 1614531096"  style="border: 4px solid rgb(0, 255, 92); cursor: url(&quot;https://i.imgur.com/T2QWx7Z.png&quot;), auto;">

我怎样才能避免这种情况？我应该考虑使用 jQuery 动画吗？ 是什么导致它出现故障？我该如何预防？我只想进行平滑的过渡刷新……并希望我的 DOM 渲染得很好。

请指教。

直播网站（请在手机中查看）

https://www.bunlongheng.com/norden?code=rithys4k

【问题讨论】：

好像刚刚加载中

为您的图像元素定义“最小高度”并查看结果。

将 min-height 添加到 100px 后。好多了，但是闪烁还在吗?????????‍♂️

【参考方案1】：

不要直接给图像添加边框，而是用div 包裹img 标签并将width、height 和border 属性分配给div。对于img 标记，提供max-width:100%。赋予alt 属性以显示占位符，直到图像加载完毕。