Question

我正在制作一个目前看起来像这样的小型懒人：

<!-- an image -->

<div data-image-src="http://lorempixel.com/450/350/" width="450" height="350" style="width:450px;height:350px" ></div>
<script>
    // Lazy load all images
    var elements = document
        .querySelectorAll('[data-image-src]');

    Array.prototype.forEach.call(elements, function(element) {
        var image   = document.createElement("img"),
            parent  = element.parentElement,
            src     = element.getAttribute('data-image-src');

        for (var attr in element.attributes) {
            if ( element.attributes.hasOwnProperty(attr) && attr !== 'length' ) {
                image.setAttribute(element.attributes[attr].name, element.attributes[attr].value);
            }
        }

        image.src = src;
        image.onload = function() { parent.replaceChild(image, element); }
    });
</script>

正如你所看到的，图像元素真的很难看。我想取消标头中<img>元素的加载，并在页脚中触发，而不是使用<div>作为占位符。希望不必省略图像上的[src]属性。

我特别感兴趣的是他们拥有src属性。我的目标是能够使用具有有效，规则语法的图像标记，并且还能够延迟加载它们。

这可能是暂时替换其中一个HTMLImageElement原型方法吗？

由于

Answer 1

<img src="1x1.png" data-image-src="http://lorempixel.com/450/350/" width="450" height="350" style="width:450px;height:350px" />

为什么不使用透明占位符，然后在load事件上换出src？

延迟加载图像，但使用img元素的标准语法

1 个答案: