图片延迟加载(lazyload)

hbghlyj

原始HTML(属性src指向一个占位的none.gif而属性file才是真实路径)	<ignore_js_op> <img aid="12795" src="static/image/common/none.gif" zoomfile="data/attachment/forum/202209/16/141211xaiv66el4smmi9lu.png" file="data/attachment/forum/202209/16/141211xaiv66el4smmi9lu.png" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" id="aimg_12795" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" width="1144"> <div class="tip tip_4 aimg_tip" id="aimg_12795_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>Screenshot 2022-09-13 at 14-45-59 A2 Complex Analysis-week 6-Lecture 3.png</strong> <em class="xg1">(22.77 KB, 下载次数: 0)</em></p> <p> <a href="forum.php?mod=attachment&aid=MTI3OTV8NTRlZGU4ZDl8MTY2MzM1MjkyMHwyODYxfDk1NzY%3D&nothumb=yes" target="_blank">下载附件</a> </p> <p class="xg1 y">2022-9-16 14:12 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> 复制代码
当图片进入视口,将src设为真实路径	<ignore_js_op> <img aid="12795" src="data/attachment/forum/202209/16/141211xaiv66el4smmi9lu.png" zoomfile="data/attachment/forum/202209/16/141211xaiv66el4smmi9lu.png" file="data/attachment/forum/202209/16/141211xaiv66el4smmi9lu.png" class="zoom mw100" id="aimg_12795" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" style="" lazyloaded="true" _load="1" initialized="true" width="1144"> <div class="tip tip_4 aimg_tip" id="aimg_12795_menu" style="position: absolute; z-index: 301; left: 482.067px; top: 1136.17px; display: none;" disautofocus="true" initialized="true"> <div class="xs0"> <p><strong>Screenshot 2022-09-13 at 14-45-59 A2 Complex Analysis-week 6-Lecture 3.png</strong> <em class="xg1">(22.77 KB, 下载次数: 0)</em></p> <p> <a href="forum.php?mod=attachment&aid=MTI3OTV8OTFjZjlmNjF8MTY2MzM1Mjk2NnwyODYxfDk1NzY%3D&nothumb=yes" target="_blank">下载附件</a> </p> <p class="xg1 y">2022-9-16 14:12 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> 复制代码
管理面板开关: 全局→性能优化→服务器优化→开启图片延时加载: 是/否

hbghlyj

hbghlyj 发表于 2022-9-16 19:31
图片延迟加载(lazyload)

HTML 元素 <img>
属性 loading 指示浏览器应当如何加载该图像。允许的值：

eager	立即加载图像，不管它是否在可视视口（visible viewport）之外（默认值）。
lazy	延迟加载图像，直到它和视口接近到一个计算得到的距离（由浏览器定义）。目的是在需要图像之前，避免加载图像所需要的网络和存储带宽。这通常会提高大多数典型用场景中内容的性能。

我们可以把Discuz的图片延迟加载去掉, 改为浏览器自带的延迟加载(只需添加loading="lazy").