Loading = Lazy

Question

如果我有如下图像标记：

<img src="myimage.jpg" />

如果我添加“async”：

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

图像加载是否异步？

Answer 1

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 2

异步加载（延迟加载）内容的方法是不设置'src'属性，然后执行一个脚本，一旦启动DOM-ready就加载图像。

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

和jQuery（或者也可以使用普通的JavaScript）使用下面的代码（，如建议here ）：

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

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 3

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

图片代码不支持任何异步属性。

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

Answer 4

虽然@ Norguard的例子对于一两个图像来说非常简单和容易，但我发现echo.js对于延迟加载https://github.com/toddmotto/echo非常方便。

它使用data- *属性进行延迟加载图像，并附带一些其他整齐的东西。

<img data-echo="img/photo.jpg">
<script src="dist/echo.js"></script>
<script>
    echo.init();
</script>

Answer 5

如果你正在使用jQuery，我做了一些简单但有效的事情，如下所示：

<强> HTML

<div data-lazy-load-image="/Images/image-name.png" data-image-classname="pop-in"></div>

<强>的JavaScript

$(function () {
    $("[data-lazy-load-image]").each(function (index, element) {
        var img = new Image();
        img.src = $(element).data("lazy-load-image");
        if (typeof $(element).data("image-classname" !== "undefined"))
            img.className = $(element).data("image-classname");
        $(element).append(img);
    });
});

<强> CSS

@-webkit-keyframes pop-in {
    0% { opacity: 0; -webkit-transform: scale(0.5); }
    100% { opacity: 1; -webkit-transform: scale(1); }
}
@-moz-keyframes pop-in {
    0% { opacity: 0; -moz-transform: scale(0.5); }
    100% { opacity: 1; -moz-transform: scale(1); }
}
@keyframes pop-in {
    0% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

你可以扩展它以包含每个图像的附加可选属性，但你明白了。

这将等到DOM准备就绪，然后动态（异步）将图像加载到使用data-lazy-load-image属性标记的元素中。我包含了CSS来制作图像＆＃34;弹出＆＃34;当它们被装载时。

Answer 6

我在这里使用Jquery或一些library来完成这个简单的任务，可以看到很多答案。这可以在javascript中使用Promise完成，其目的是异步执行任务

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 7

WHATWG当前存在一个公开拉取请求，用于为图像和iframe引入loading属性。

Loading = Lazy

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

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

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

自v76以来，此功能已在Chromium中使用，但可能要经过非常规的shennanigans才能在非Chromium浏览器中使用。

如果要使用脚本推迟加载，则值得使用lazy属性编写图像并填充行为，而不是使用类名等。这样，您可以允许本机版本在可用时接管。

强迫渴望装载

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

<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

Answer 8

我对jQuery使用了以下方法。

首先，不要在image标记中使用“ src”属性，而是将源放到另一个属性中，如下所示：

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

然后，在jQuery文档就绪功能中，我使用以下代码将元素的async-src复制到元素的实际src中：

$("img[async-src]").each(function(index) {
    $(this).attr("src", $(this).attr("async-src"));
});

注意：

jQuery的.each函数可以按标签在HTML / DOM中编码的顺序处理标签，但是图像大小和网络问题可能意味着图像实际上并没有按顺序加载。换句话说，您的第三个async-src图像可能会在第一个图像完成加载之前在视觉上出现在屏幕上。

如果您的页面布局依赖于该图像文件的像素尺寸，例如您没有通过标签属性，CSS或父元素定义图像的尺寸-那么您可能必须在原始文件上使用“ src”属性，指向空白的空白或清除所需尺寸的GIF。

最后，如果要在异步加载图片后处理一些代码（例如，处理淡入效果或更改与该元素相关的CSS标签），请像这样展开jQuery：

$("img[async-src]").each(function(index) {
    $(this).load(function() {
        // code to run after loading
    });
    $(this).attr("src", $(this).attr("async-src"));
});

Answer 9

您可以阅读有关lazyload属性的更多信息：

<img src="myimage.jpg" alt="some description" lazyload/> - with default values

或者您可以优先考虑：

<img src="myimage.jpg" alt="some description" lazyload="1"/>
<img src="myimage.jpg" alt="some description" lazyload="2"/>

Answer 10

虽然其他几个答案突出了异步获取图像的方法，但了解<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 11

答案可能为时已晚，但最近遇到了同样的问题，控制台中的“灯塔”建议我应该遵循链接中此处提到的内容： enter link description here

基本上，我按照建议进行了以下操作，并且效果很好：

  <script src="lazysizes.min.js" async></script>
  <!-- Images End -->
</body>

您可以从https://raw.githubusercontent.com/aFarkas/lazysizes/gh-pages/lazysizes.min.js

下载lazysizes.min.js。

并在本地来源。

然后，将lazyload类添加到应该延迟加载的图像中。另外，将src属性更改为data-src。

例如：

<img data-src="images/flower3.png" class="lazyload" alt="">

您可能想知道为什么有必要将src属性更改为data-src。如果未更改此属性，则所有图像将立即加载，而不是延迟加载。 data-src不是浏览器可识别的属性，因此当遇到具有此属性的图像标签时，它不会加载图像。在这种情况下，这是一件好事，因为它随后允许lazysizes脚本来决定何时应加载图像，而不是浏览器。

访问参考以更好地理解。

希望这会对某人有所帮助：）

加载图像异步

11 个答案:

Loading = Lazy

强迫渴望装载

进一步阅读