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

Question

I've scouted many forums and blogs and questions and sites and whatnot but cannot seem to find a solution that works for me - I am trying to load images using pure javascript without halting the rest of the page to load, and without relying on third party libraries.

On the site I work on, there may be between 0 - 30 images that may load, of different resolutions, and as you may imagine, might slow down performance to a halt on slower connections (which is what I am trying to prevent now - I want the user to see info on the page and worry less about images hooting up the performance on it)

on my latest attempt:

(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);
    }
})();

I tried deferring the loading of the images too (the top code section hadn't had the onload event then):

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 hours in. no results. I am stumped. What am I missing? how can I force the browser to just move on with life and load those images later on?

Answer 1

At first, you may load images one after one, using recursive functions:

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

Start that if the html is loaded completely:

window.onload=addimg;

(pseudocode)

Answer 2

You can also use a image compressor tool to make the images load faster. http://optimizilla.com/

This is a great article that might also help you

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

Answer 3

Few suggestions:

1. If the images are not in the current viewport and are taking up too much initial bandwidth then i suggest to lazy load images when the user is in (or close to) the same viewport of the images.

2. You can also try deferring the images like what you are doing, but ensure the script is run right before the end body tag.

3. I also suggest doing things like making sure images are correctly compressed and resized (you have an image there that is 225kb which isnt ideal)