$(window).load Chrome,Safari problem

Question

Ok here is the problem

$(window).load(function () {
        \\Do something
    });

and other variations of this just don't work in chrom and safri. FF,IE opera work fine I search but didn't find any working solution someone know how to check in chrome,safari when the page has finished loading?

Answer 1

You can try one of the below code if you want to execute something on page load.

$(document).ready(function(){
    //Page loaded
});

OR

$(function(){
    //Page loaded
});

EDIT: Try this

window.onload = function(){
   //Page loaded
};

Or if you want to use jQuery then try this

$(window).bind('load', function(){
   //Page loaded
});

Answer 2

I have a page that loads fine in FF but doesn't work in Chrome because I have 2 scripts using $(window).load(function() and the 2nd seems to execute before the images appear.

The first script checks for missing images and substitutes an error image:

   $(window).load(function() {
    $("img").each(function(){
      var image = $(this);            
      if(image.context.naturalWidth == 0 ||
      image.readyState == 'uninitialized'){   
         $(image).unbind("error").attr(
             "src", "assets/img/image_missing.jpg"
         );
      }
 });
});  

The second function realigns elements on a row, in case the window is resized (it's a responsive page):

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

When I use debug on this in Chrome, the first function is executed, but when the 2nd is executed any images that are missing have not been displayed. They only appear after the 2nd function has completed.

When the page first loads, the image for "Socketry" is not found, so Spanners/Metric/Imp is displayed immediately underneath on the same row.

The 2nd script re-aligns the rows assuming this to be correct, however when "Image Missing" is then displayed, this forces the Spanners onto the next row.

"Image Missing" should be displayed prior to the row alignment, in which case the rows will align correctly, as they do in Firefox.

* I would have posted screen shots but I don't have 10 reputation - ggrrrhh! Sometimes a picture is worth 1,000 words... *

Guess I had better desctibe the page in words...

I have 13 images displayed 6 to a row, so 2 full rows and 1 on a 3rd row. The 6th image cannot be found, so the 7th displays right under the missing image symbol on the top row, instead of as the 1st image on the 2nd row. The 2nd script aligns the rows, assuming that the 7th image is on the top row, and then the 1st script makes the "Image Missing" image appear, which forces the 7th image to the 2nd row, on it's own. The 2nd script needs to execute after all images are loaded. Hope that makes sense.

Answer 3

window.load和document.ready都适合我，这是一个小提琴

Answer 4

I don't think this will answer your question, but in my case load() wasn't working in Chrome alone because I was trying to load to a <form> that was inside another <form> . Chrome completely ignores the existence of the inner <form> .

Try downloading an uncompressed version of jQuery and debugging it.

Answer 5

This can happen in some browsers (I've experienced it in Opera and Chrome) when working on localhost. The "ready" event seems to fire before the javascript has a chance to add the listener so it $(window).ready never fires.

Answer 6

Example: Run a function when the page is fully loaded including graphics.

  $( window ).load(function() {
         // Run code
         });

Example: Add the class bigImg to all images with height greater than 100 upon each image load.

$( "img.userIcon" ).load(function() {
   if ( $( this ).height() > 100) {
     $( this ).addClass( "bigImg" );
   }
});

For more information, see http://api.jquery.com/load-event/ .

Answer 7

Try this way:

$(document).ready(function(){
   //Do something
})