加载图像时使用 jQuery .load 函数

Question

I'm wanting to use the jQuery .load function to run some code when all the images are loaded on the page.

jQuery("img").load(function () {
    //run some code
});

Now the code runs but my question is, will the code run after all images on the page are loaded or will the code run when the first image element is loaded.

I know I can use the jQuery $(document).ready function or the `$(window).load function, but this will fire when everything is loaded. I want the code to run when the image elements are loaded, and before all the scripts in the footer load.

Anyone care to share their expert opinion on the matter?

Answer 1

I guess you should use the load function with the window instead of img's:

 $(window).on('load', function() { // makes sure the whole site is loaded console.log("Everything loaded"); })

EDIT: Here you have a working example of a preloader: https://codepen.io/niklausgerber/pen/MKrVdQ

Answer 2

Instead of image use window to know if every elements of the page loaded completely.

JQUERY

$(window).on('load', function() { 
 // do this
});

or

$(window).load(function() { 
 // do this
});