html - 异步加载图像

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)使用以下代码(建议 here ):

<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>