How to run a jQuery Code after loading all the images in my page?

How to run a jQuery Code after loading all the images in my page ?

-------------Problems Reply------------

$(window).load(function(){})

Checking to see that all images have loaded is slightly involved, so unless you have a pressing need to be so precise, it is much easier to check that all image and everything else has loaded:

$(window).load(function() { ... });

This makes use of the jQuery .load() method.

If you do really need to check for specifically only images, then things get a little trickier. I initially wanted to do this:

$("img").load(function() { ... }); \\ THIS IS INCORRECT!!!!!

However the above creates a jQuery object that contains all images, and then it binds function() { ... } to each of these images. So the above will trigger a function as many times as there are images on the page!

To get around this, we should check how many images there are on the page, and only fire the function once after all those images have been loaded:

$(function() {

// To keep track of how many images have loaded
var loaded = 0;

// Let's retrieve how many images there are
var numImages = $("img").length;

// Let's bind a function to the loading of EACH image
$("img").load(function() {

// One more image has loaded
++loaded;

// Only if ALL the images have loaded
if (loaded === numImages) {

// This will be executed ONCE after all images are loaded.
function() { ... }
}
});
});

jsFiddle example

$(function() {
var length = $('img').length ;
var counter = 0;
$('img').each(function() {
$(this).load(function(){
counter++;
if(counter == length) {
Callback(); //do stuff
}
});
});
});

@Peter Ajtai answer will work except on IE's cached images. To make it work with IE, here's a solution: http://stackoverflow.com/a/3877079 or by using the imagesLoaded plugin.

I did something like this recently, but went about it differently.

$('img').on('load', function(){
$('img').off('load'); //detaches from load event, so code below only executes once
// my code to execute
});

For anyone using jquery this little snippet does the trick (it ensures that all images are loaded before any script inside it are run)...

$(window).bind("load", function() {
// code goes here here
});

Not a direct answer. Still worth referring.

Refer

  1. Run JavaScript Only After Entire Page Has Loaded
  2. jQuery callback on image load (even when the image is cached)

Code

$(window).bind("load", function() {
// code here
});

Category:javascript Views:0 Time:2010-09-08

Related post

  • google.load not working when run in jquery's $(window).load(function(){});? 2010-06-21

    I'm using the Google AJAX Feed API to search for a RSS feed. It works when I just run the javascript in the head of my HTML document in EXAMPLE 1 below (I know I'm getting no result, but that's a problem for another day!), but I need to actually run

  • Jquery code on load not firing 2009-08-04

    I have the following JQuery code in a external JS file linked into a usercontrol in .Net 1.1 webapp. The usercontrol is a timesheet. When the page loads it calls MonthChange and works fine in one page. But now I want to load the timesheet/usercontrol

  • Inherit jquery code when loaded with ajax 2011-01-19

    I've got some jquery code to style some checkboxes on my page. I also have a table. This table doesn't show all rows when the page is loaded sans you have to load the rest of the rows with an ajax request. The problem is that the checkboxes in that a

  • How to run this jquery code only before and after particular screen size? 2011-11-10

    I have this jQuery code <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script> $( document ).ready( function() { var $body = $('body'); //Cache this for performance var setBodyScale = function()

  • How to run my jquery code on div that inserted form jquery code? 2012-03-01

    I need your help in my code I have problem when new div inserted from jquery the inserted div does not apply to my jquery code if anyone have solution please tell me and this my Html code <input type="text" id="t" value=""/> <a href="#" clas

  • javascript or jquery code to obtain entire text content of web page within an iframe (including/excluding links on that page) 2011-10-12

    I know how to obtain the content of div within an iframe using jquery-- iframe content: <div id="myContent"></div> jQuery: $("#myiframe").find("#myContent") What I want to do is, obtain the entire text content of an iframe, both with the

  • jQuery Deep linking, load content from div in other page issues 2012-04-03

    So admitingly I'm new to this, but I've read a few books and searched online and can't quite find what I need. So any assistance would be a blessing. I was able to set up a function where upon clicking the nav link it loads the "#content" div from th

  • How to run JQuery code in IE 8 Script Debugger? 2011-06-24

    I am trying to use the IE 8's script debugger to run some JQuery code in the Console Tab, but all I get back is {...} For example if I try and do something simple like select an element using a class name, I get back some braces an ellipse. >>$

  • Where does jquery code go in a partial view? 2010-01-21

    I am brand new to asp.net MVC and JQuery. I've created a MVC site using the NerdDinner tutorial. For the create and edit views, I'm using a partial view (code simplified below) for data entry. Where would I place my jquery code? <%@ Control Langua

  • $(document).ready(function() {}) is being run before the Flex app loads in my page 2010-06-08

    I have a page with an some normal javascript, a swf file and some jquery. I'm running my jquery code inside the $(document).ready(function() {}) function. But the code is being run before the Flex component (the swf file) has finished loading. Is the

  • jQuery works from the Firebug console, but not on page load 2010-10-08

    I'm very new to jQuery and javascript in general, so maybe there's something I've missed. I have a html page with a link to the latest version of jQuery in the head... <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery

  • jQuery / JavaScript - Loading iframe with Ajax slows down page 2011-03-20

    I'm loading a iframe with $.ajax(): $("#iframe_wrapper").each(function(){ $.ajax({ type: "post", url: "http://site.com", data: { action: 'get_the_iframe' }, context: this, success: function(html){ $(this).html(html); $(this).show(); $('#theiframe').l

  • Execute external jQuery code without calling an explicit function 2011-05-12

    I wrote some jQuery code in an external file, with the goal to match each <select> tag in the page where the script is included. My goal would be to include the script reference in the <head> tag of the target pages and "run" the jQuery c

  • Why does this jQuery code work in Firefox but not Chrome or Safari? 2011-10-09

    I'm using jQuery to highlight (by changing bg color) some table cells. I want the button (a simple anchor) to be given the class name 'selected' when clicked and I want certain table cells below the buttons to highlight. When you click the same butto

  • jQuery not functioning without document.ready on a cfm page 2012-03-29

    I'm pretty new to jQuery, and I am converting a page from "regular" javascript to jQuery on a coldfusion page. The page is driven off a stored procedure, which, based on it's result sets, changes the page and number of input fields. On my page, the i

  • jQuery code in ajax loaded content only runs once 2010-05-13

    I have been looking around SO for a while and haven't been able to find anything that matches my issue, which I'm not even sure I can explain that well, so take that for what it's worth. I have a page that loads content into a div via AJAX (using the

  • jQuery codes not running on page load in SharePoint 2011-07-25

    I'm having trouble with getting my jQuery codes to run in SharePoint. Actually, it used to not be a problem. Some of my pages require jQuery to render elements of the page, particularly in positioning and visibility. when I created the page in the de

  • Using Html5boilerplate's code to load JQuery very slow when run locally 2012-01-03

    I have been using the following code for loading JQuery in all of my projects. I grabbed it from http://html5boilerplate.com/. There is extensive disussion of this technique here. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.mi

  • page does not run jquery script on load 2009-09-22

    I have an ASP.net mvc page that executes a jquery script on load. The script calls an action on a controller and hydrates a dropdown list. this works on my dev machine but when deployed to the webserver (Win 2k3 box running IIS 6) the page loads but

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.077 (s). 11 q(s)