大量图片的文章有部分随机图片加载不出来

[Pil0tXia]

我有一个有大量图片的页面，会有部分图片加载不出来，鼠标点一下又能正常显示，刷新页面之后也能显示了。请问可能是什么原因呢？

链接：https://www.pil0txia.com/post/2020-10-01_tenki-no-ko-4k-hdr-wallpaper/

[jerryc127]

你可以試著把 lazyload 給關了 看看
如果還是存在問題 你使用的圖床鏈接速度也有影響

[Pil0tXia]

图床是腾讯云COS+CDN，不会存在速度问题的。
我回去了关掉lazyload试试。但是关掉lazyload之后，整个页面的图片就会在打开页面的时候全部加载完毕了吧，流量还是蛮多的。还是希望不用关闭lazyload
请问有办法解决吗？

[Pil0tXia]

@jerryc127 被标记了（已取消）的图片是能正常加载的，似乎是NS_BINDING_ABORTED。但是在F12里取消勾选停用缓存后，出现了大量的CORS错误，对应的图片都不能加载。应该是脚本逻辑问题？

[Pil0tXia]

我开全局代理用台湾节点试了一下，也是能复现CORS错误的，图会裂掉，鼠标单击又可以正常大图显示。chrome102
开发人员工具里的停用缓存要关掉，浏览器也要清理缓存，开着的话似乎无法稳定复现

[Pil0tXia]

本地测试，开启lazyload依然会裂图，同样的报错；关闭lazyload后恢复正常，图片全部正常加载。

应该是lazyload的问题

[Pil0tXia]

补充：使用{% gallery true,440,49 %}标签没有出现此问题

希望这个lazyload问题能修复

[jerryc127]

你把 lazyload 關了 圖片能正常顯示
那估計可能是 lazyload 這個插件的問題
這個我也解決不了
你可以去反饋下

{% gallery true,440,49 %} 這個沒有使用到 lazyload 那個插件

[Pil0tXia]

lazyload作者一直没有回复issue verlok/vanilla-lazyload#590
{% gallery true,440,28 %} 这个图库tag没有lazyload，进入页面的时候会直接加载全部28张图片，流量压力还是蛮大的，但是缩减数字的话又会增加点击“加载更多”的次数，有什么优化的建议吗？
希望可以加入更有效的lazyload，比如类似谷歌图片那样，一次性加载1.5屏的图片，随着页面向下滚动，不用点击加载更多就继续加载1屏的图片

[Pil0tXia]

@jerryc127 您好！lazyload的作者回复了，回复内容见verlok/vanilla-lazyload#590
“看起来你没有在图片加载前设置其宽度和高度属性。因此，浏览器不能预先知道它们应该占用多少空间。如果是这种情况，请在图片的HTML中设置宽度和高度属性，这样应该可以解决你的问题，而不需要使用占位符图片。”
我确实没有开启那张小熊的加载gif，lazyload.placeholder属性置为了空。请问您觉得有什么比较好的解决方案吗？

[Pil0tXia]

有的网站会在图片加载完成之前显示一块灰色的占位图片，那是由框架实现的吧？我需要将lazyload.placeholder指定为一张灰色的图片吗

[Pil0tXia]

我刚刚看到一篇文章，里面有个解决方案我觉得挺合适的：https://sylvenas.github.io/blog/2018/03/09/placeholder.html
“medium
1.创建一个div标签作为placeholder，并且使用padding-bottom属性，来设置该div的宽高比和图像的宽高比一样，防止图片在加载的时候出现塌陷的问题”

可能需要您在lazyload.placeholder属性为空的时候增强一下默认设置，预先分配好页面的空间
@jerryc127

[jerryc127]

不管是lazyload作者的方法也好，还是你发的那个网页也好，前提都是得知道图片的具体尺寸，同时要写进html里。
要么你自己一个个写尺寸，要么就是写个script 遍历所有的照片，获取尺寸并写进html 里

[Pil0tXia]

不管是lazyload作者的方法也好，还是你发的那个网页也好，前提都是得知道图片的具体尺寸，同时要写进html里。 要么你自己一个个写尺寸，要么就是写个script 遍历所有的照片，获取尺寸并写进html 里

嗯嗯，谢谢回复~那是不是用纯色图片比较好？考虑到获取图片的流量，是从图床下载webp图片呢，还是用base64写到lazyload.placeholder属性里比较好呢？@jerryc127

[Pil0tXia]

请问如果想要填写lazyload.placeholder属性，使用这段svg代码是否最好、最省流量？

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400"><rect width="100%" height="100%" fill="#aaa"/></svg>

来自https://placehold.co/600x400/aaa/aaa/svg?text=\n。它的长度比base64还要再短一些。还有什么比较好的选择吗？
@jerryc127

[jerryc127]

我觉得省不了多少。。以现在的网速，这点速度说真的可以忽略不及，当然你要是找一张超级大的 placeholder， 那当我没说

[Pil0tXia]

确实感觉不出多少，不过也确实省下了一次HTTPS连接的时间hh。lazyload.placeholder属性不支持svg标签，经过yaml对双引号的反斜杠转义或HTML实体编码转义也不行，所以我还是用了base64。谢谢！

https://github.com/Pil0tXia/pil0txia.github.io#2023-7-3-lazyload添加placeholder