为什么我的图像阻碍了页面加载，如何延迟/使其异步或延迟？

Question

我搜寻了许多论坛，博客，问题和站点，但似乎找不到适合我的解决方案-我正在尝试使用纯JavaScript加载图像，而不会暂停其余页面的加载，并且不依赖于第三个政党图书馆。

在我工作的网站上，可能会加载0-30张分辨率不同的图像，并且您可能会想到，在较慢的连接上，性能可能会降低，从而停止（这是我现在要防止的事情-我希望用户在页面上看到信息，而不必担心图片会影响其性能）

在我最近的尝试中：

(function () {
    // jquery is unavailable here. using javascript counterpart.

    var carouselDivs = document.querySelectorAll('#caruselImagesDivs div[data-url]');
    var carouselIndicators = document.querySelector('.carousel-indicators');
    var carouselInner = document.querySelector('.carousel-inner');
    for (var i = 0; i < carouselDivs.length; i++) {
        var liIndicator = document.createElement('LI');
        liIndicator.dataset.target = "#property_image_gallery";
        liIndicator.dataset.slideTo = i + 1;

        var divItem = document.createElement('DIV');
        divItem.className = "item";

        var image = document.createElement('IMG');
        image.dataset.src = carouselDivs[i].dataset.url;
        image.classname = 'img-responsive center-block';

        // for some reason I thought this might work, but it hasn't.
        image.onload = function () {
            image.src = image.dataset.src;
            image.onload = function () { };
        }
        image.src = '/Images/blankbeacon.jpg';

        divItem.appendChild(image);
        carouselIndicators.appendChild(liIndicator);
        carouselInner.appendChild(divItem);
    }
})();

我也尝试过延迟图像的加载（然后，顶部代码部分没有onload事件）：

function initImg() {
        var imgs = document.querySelectorAll('#property_image_gallery .carousel-inner .item img');
        for (var i = 0; i < imgs.length; i++) {
            var imgSource = imgs[i].dataset.src;
            imgs[i].src = imgSource;
        }
    }

window.onload = initImg

2小时内。没有结果。 我感到难过。 我想念什么？ 如何强制浏览器继续运行并稍后加载这些图像？

Answer 1

首先，您可以使用递归函数一个接一个地加载图像：

function addimg(img){
  img.onload=function(){
    addimg(nextimg) ;
    img.onload=null;//kill closure -> free the js memory
  }
 }

从开始，如果html完全加载：

window.onload=addimg;

（伪代码）

Answer 2

您还可以使用图像压缩器工具来加快图像加载速度。 http://optimizilla.com/

这是一篇很棒的文章，可能对您也有帮助

https://varvy.com/pagespeed/defer-images.html

Answer 3

几点建议：

1. 如果图像不在当前视口中并且占用了过多的初始带宽，那么我建议在用户位于（或接近）图像的相同视口时延迟加载图像。

2. 您也可以像执行操作一样尝试延迟图像，但是要确保脚本在end body标签之前运行。

3. 我还建议您执行一些操作，例如确保正确压缩图像并调整大小（您的图像有225kb ，这是不理想的）