加载图像异步

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属性(指定width和height在HTML中),并在某些时候返回, JS,并设置图像URL.

Answer 3

目前 WHATWG 有一个开放的拉取请求来引入loading图像和 iframe的属性。

加载=懒惰

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

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

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

自 v76 以来，这已经在 Chromium 中，但在通过通常的规范恶作剧之前，它可能不会影响非 Chromium 浏览器。

如果您打算使用脚本延迟加载，那么值得使用lazy属性编写图像并填充行为，而不是使用类名等。这样，您可以允许本机版本作为它变得可用。

强制加载

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

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

进一步阅读

查看 WHATWG 规范的拉取请求

回退 JavaScript 带有关于可能不使用回退的注释

Answer 4

异步加载图像的另一种方法是Promise在 javascript 中使用 ，它用于异步执行操作。

function asyncImageLoader(url){
    return new Promise( (resolve, reject) => {
        var image = new Image()
        image.src = url
        image.onload = () => resolve(image)
        image.onerror = () => reject(new Error('could not load image'))
    })
}    

// then use it like this

var image = asyncImageLoader(url)


image.then( res => {
    console.log(res)
})
  

Answer 5

虽然其他几个答案强调了异步获取图像的方法，但了解<img />标签支持一个属性可能会有所帮助，该属性可以作为浏览器的提示，从而可能导致图像被异步解码。Internet Explorer 似乎不支持它。

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

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#attr-decoding

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding

https://github.com/whatwg/html/issues/1920

Answer 6

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

图像标记不支持任何异步属性.

http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element