异步加载镜像

Question

如果我有一个如下所示的图像标签：

<img src="myimage.jpg" />

如果我加上"async“：

<img async src="myimage.jpg" />

镜像是否会异步加载？

Answer 1

异步加载(惰性加载)内容的方法是不设置“src”属性，然后执行一个脚本，该脚本在DOM-ready启动后加载图像。

 <img data-lazysrc='http://www.amazingjokes.com/images/20140902-amazingjokes-title.png'/>

使用jQuery (或者也可以使用普通的JavaScript )使用下面的代码(按照建议的)：

<script>  
function ReLoadImages(){
    $('img[data-lazysrc]').each( function(){
        //* set the img src from data-src
        $( this ).attr( 'src', $( this ).attr( 'data-lazysrc' ) );
        }
    );
}

document.addEventListener('readystatechange', event => {
    if (event.target.readyState === "interactive") {  //or at "complete" if you want it to execute in the most last state of window.
        ReLoadImages();
    }
});
</script>

Answer 2

var img = new Image(),
    url = "myimg.jpg",
    container = document.getElementById("holder-div");

img.onload = function () { container.appendChild(img); };
img.src = url;

这将在您在脚本中请求图像时立即开始加载图像，并且当图像加载完成时，它将获取图像并将其添加到其中。

有很多其他的方法可以做到这一点。

这只是一个简单的异步加载单个图像的示例。

但其中的寓意是：

要使异步加载正常工作，可以将其加载到JavaScript中并使用onload，或者在页面上包含图像标记，而不使用src属性(在HTML中指定width和height )，然后在JS中返回并设置图像URL。

Answer 3

现代的方法是使用图像和iframe的loading属性。

属性：loading=lazy

这将推迟内容的加载，直到元素到达与视区的计算距离(这只是意味着，用户很可能会将其滚动到视图中)。

<img src="defer.png" loading="lazy" alt="An Awesome Image" width="500" height="400">

将该属性设置为lazy将调用新的行为。

这已经在v76之后的Chromium中出现了，但在通过通常的规范shennanigans之前，可能不会影响非Chromium浏览器。

如果您打算使用脚本延迟加载，则值得使用lazy属性编写图像并对行为进行多填充，而不是使用类名等。这样，您可以在本机版本可用时接管它。

强制紧急加载

自动延迟加载可能会成为轻量级浏览的一个功能，在这种情况下，您可能想要执行相反的操作，强制加载图像。您可以使用值为eager的相同loading属性来请求浏览器获取图像，即使浏览器可能选择不获取图像。

<img src="defer.png" loading="eager" alt="An Awesome Image" width="500" height="400">

进一步阅读

View the pull request for the WHATWG spec

Fallback JavaScript with notes about perhaps not using fallbacks