我现在看到很多网站,主要是有大量图片的教程网站,一旦进入视口,他们只会在页面下方加载图片？
我该怎么做呢？
一个例子:
http://www.chopeh.com/blog/logo-design-start-to-finish/
向下滚动页面时,视口下方的图像会淡入
我正在寻找一个支持延迟加载图像的JQuery插件.该延迟加载jQuery插件 不再支持和Firefox中不起作用.
有没有人知道支持大多数现代浏览器的好选择？
我也对其他方法持开放态度.我有一个隐藏的div与图像,我不想加载,除非div是可见的.让我知道在这种情况下是否有更好的方法来延迟图像负载.
我正在寻找一种正确的方法来实现图像的延迟加载，而不会损害可打印性和可访问性，并且不会引入布局转换（内容跳转），最好使用本机loading=lazy和旧浏览器的回退。问题的答案如何使用 JavaScript 延迟加载图像？
包括各种解决方案，但没有一个完全满足所有这些要求。
优雅的解决方案应使用基于有效且完整的HTML标记，即<img src，srcset，sizes，width，height，和loading属性，而不是将数据放入data-属性，如流行的JavaScript库lazysizes和香草lazyload做。也不应该使用<noscript>元素。
由于chrome 中的一个错误，第一个支持原生延迟加载的浏览器，尚未加载的图像将在打印页面中丢失。
上面提到的两个 javascript 库都需要没有任何src属性的无效标记，或者空的或低质量的占位符 (LQIP)，而src数据被放入data-src，而srcset数据被放入data-srcset，所有这些都只适用于 javascript。这是否被认为是 2020 年可接受的甚至最佳实践，这是否既不损害站点可访问性、跨设备兼容性，也不损害搜索引擎优化？
更新：
我在此 codepen 中仅使用 HTML 和 CSS@media print背景图像尝试了解决打印错误的方法。即使这按预期工作，每个图像都会有一个必要的 css 指令，这既不优雅也不通用。不幸的是，也没有办法在元素内部使用媒体查询。<picture>
Houssein Djirdeh 在lazy-load-with-print-ctl1l4wu1.now.sh有另一种解决方法，使用javascript 在单击“打印”按钮时更改loading=lazy为loading=eager。也可以在onbeforeprint上使用相同的函数。
我 …