jQuery event for images loaded

0 votes

Is it possible to detect when all images are loaded via a jQuery event?

Ideally, there should be a

$(document).idle(function()
{
}

or

$(document).contentLoaded(function()
{
}

But I can't find such a thing.

I thought of attaching an event like this:

$(document).ready(function()
{
    var imageTotal = $('img').length;
    var imageCount = 0;        
    $('img').load(function(){if(++imageCount == imageTotal) doStuff();});
}

But will this break if an image fails to load? It's critically important for the method to be called, and at the right time.

Jun 15, 2022 in JQuery by gaurav
• 22,940 points
529 views

1 answer to this question.

0 votes

To check if an image is loaded successful or not, you can combine the use of jQuery 'load()' and 'error()' event : $('#image1') . load(function(){ $('#result1'). text('Image is loaded!

answered Jun 16, 2022 by rajatha
• 7,480 points

Related Questions In JQuery

0 votes
1 answer

Listening for Youtube Event in JavaScript or jQuery

I'm trying to get the onStateChange event ...READ MORE

answered May 30, 2022 in JQuery by gaurav
• 22,940 points
769 views
+1 vote
1 answer

How to check if a jQuery plugin is loaded?

Hello @kartik, for the plugins that doesn't use ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,840 points
997 views
0 votes
1 answer

How to set cache false for getJSON in jQuery?

Hello @kartik, Your code just needs a trigger ...READ MORE

answered May 12, 2020 in JQuery by Niroj
• 82,840 points
394 views
+1 vote
2 answers

How to set cache false for getJSON in jQuery?

You can't pass any configuration parameters to ...READ MORE

answered Oct 7, 2020 in JQuery by Amit
• 140 points
1,721 views
0 votes
0 answers

Uncaught TypeError: Cannot read property 'top' of undefined

I have two different kinds of sticky ...READ MORE

May 11, 2022 in Java-Script by Kichu
• 19,050 points
1,369 views
0 votes
1 answer

jQuery find, each, children and accessing sub-children

Well you code is not really correct. .find() does ...READ MORE

answered Jun 27, 2022 in Web Development by rajatha
• 7,480 points
1,043 views
0 votes
0 answers

Getting jQuery selector to recognize newly-added DOM elements

I've searched the jQuery docs and here ...READ MORE

Aug 18, 2022 in Web Development by gaurav
• 22,940 points
651 views
0 votes
1 answer

How to use jquery with asp.net ajax?

If you weren't aware, Microsoft is planning ...READ MORE

answered Oct 15, 2018 in IoT (Internet of Things) by Annie97
• 2,160 points
279 views
0 votes
1 answer

jQuery/JavaScript to replace broken images

To replace broken images in JavaScript, the ...READ MORE

answered Jun 16, 2022 in JQuery by rajatha
• 7,480 points
111 views
0 votes
1 answer

jQuery on page load event not working

You should be passing .on("load") on the window instead ...READ MORE

answered Jun 20, 2022 in JQuery by rajatha
• 7,480 points
239 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP