javascript - Check if all the images in the page are loaded - Stack Overflow

admin管理员组

文章数量:1287580

The goal: check if all images in the page are loaded. If yes, call to a function, if not, again to check if all images are loaded.

My try:

let checkImages = new Promise(resolve => { resolve(areCompleted()); });

function areCompleted() {
  let images = document.querySelectorAll('img');
  images = Array.from(images);

  for (let i = 0; i < images.length; i++) {
    if (!images[i]plete) {
      return false;
    }
  }
  return true;
}

If all images are pleted, it resolves the promise with true, if not, false.

checkImages.then(pleted => {
  if (pleted) {
    pletedFunction();
  } else {
    // Check again
  }
});

If the response is true, call a function, if not... I don't know how to do the same check again, but I want to do that checking until the response is true.

The goal: check if all images in the page are loaded. If yes, call to a function, if not, again to check if all images are loaded.

My try:

let checkImages = new Promise(resolve => { resolve(areCompleted()); });

function areCompleted() {
  let images = document.querySelectorAll('img');
  images = Array.from(images);

  for (let i = 0; i < images.length; i++) {
    if (!images[i].plete) {
      return false;
    }
  }
  return true;
}

If all images are pleted, it resolves the promise with true, if not, false.

checkImages.then(pleted => {
  if (pleted) {
    pletedFunction();
  } else {
    // Check again
  }
});

If the response is true, call a function, if not... I don't know how to do the same check again, but I want to do that checking until the response is true.

• javascript

Share Improve this question Follow edited Feb 26, 2018 at 12:40 Angel Luis asked Feb 26, 2018 at 11:25 Angel LuisAngel Luis 32244 silver badges1414 bronze badges 9

• 1 This seems like a bizarre use of promises. Normally you would resolve it only when all the images had loaded. – Quentin Commented Feb 26, 2018 at 11:28
• Do you just want an event to trigger when all the images are loaded, or do you need to use a promise? – Reinstate Monica Cellio Commented Feb 26, 2018 at 11:30
• @Archer I want to use a Promise because if I do the checking with a while loop I can block the script. I don't know if there are another methods. – Angel Luis Commented Feb 26, 2018 at 11:32
• 1 Images trigger an event when they plete loading. You don't need to keep checking over and over. I'll write you some code. – Reinstate Monica Cellio Commented Feb 26, 2018 at 11:36
• 1 A promise is not a function, you cannot call it. – Bergi Commented Feb 26, 2018 at 11:57

 |  Show 4 more ments

2 Answers 2

Sorted by: Reset to default 12

This function will check for already loaded images and attach an event listener to all the others so that it can tell when every image in a given container is loaded...

function onImagesLoaded(container, event) {
    var images = container.getElementsByTagName("img");
    var loaded = images.length;
    for (var i = 0; i < images.length; i++) {
        if (images[i].plete) {
            loaded--;
        }
        else {
            images[i].addEventListener("load", function() {
                loaded--;
                if (loaded == 0) {
                    event();
                }
            });
        }
        if (loaded == 0) {
            event();
        }
    }
}

var container = document.getElementById("container");

onImagesLoaded(container, function() {
    alert("All the images have loaded");
});

<div id="container">
  <img src="https://cdn.vox-cdn./thumbor/C1SdoDActSv8tPONx_OjwEobUjw=/0x0:1004x753/1200x800/filters:focal(0x0:1004x753)/cdn.vox-cdn./uploads/chorus_image/image/49523369/20150428-cloud-puting.0.jpg" />
  <img src="https://images.techhive./images/article/2016/08/clouds-100678070-primary.idge.jpg" />
  <img src="https://www.quali./wp-content/uploads/2016/04/101-HEADER-IMAGE.jpg" />
  <img src="https://cdn.puterworlduk./cmsdata/features/3641280/cloud_istock_malerapaso_thumb800.jpg" />
</div>

This will still work if all the images have already loaded, due to being cached, or if there are no images in the container.

If you want to check all images in a page, simply change the container selector to the body instead...

var container = document.getElementsByTagName("body")[0];

The code in the accepted answer is a great little ditty -- just one thing to add -- if there are zero images on the page, the event doesn't get called because the check for 0 is inside the loop. So I would remend this small change:

function onImagesLoaded(container, event) {
    var images = container.getElementsByTagName("img");
    var loaded = images.length;
    for (var i = 0; i < images.length; i++) {
        if (images[i].plete) {
            loaded--;
        }
        else {
            images[i].addEventListener("load", function() {
                loaded--;
                if (loaded <= 0) {
                    event();
                }
            });
        }
    }
    if (loaded <= 0) {
        event();
    }
}

本文标签： javascriptCheck if all the images in the page are loadedStack Overflow