1

I am using a JavaScript library to arrange few images on the webpage. The following browsers:

  • Firefox
  • IE 11
  • Microsoft edge

render the page as it was planned, the problem occurs with Chrome browser. It messes up the complete layout.

The above browsers don't load any content unless all the images have been downloaded, until then it shows a blank white screen, and all of a sudden it will show all the content rendered perfectly. And in case of Chrome, the browser displays content on the go, as in you can see the images appearing in a scanline fashion.

I've tried calling the function that arranges these images inside:

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

and it didn't fix the issue, I tried calling this in the <head></head> and also just before closing </body>, that didn't fix it either. Is this a Chrome related issue?

What should be the correct point in time where the function should be called?

Siddharth Thevaril
  • 3,722
  • 3
  • 35
  • 71
  • note: [Loading the resource is not all](http://stackoverflow.com/questions/39543290/how-to-know-when-browser-finish-to-process-an-image-after-loading-it), but it's already a good start ;-) – Kaiido Dec 17 '16 at 12:14

3 Answers3

1

There is a nice library on the web with a comprehensive name imagesLoaded designed to fix your issue! It is supposed to work cross-browser of course, so no differences in behaviour in Chrome or other browsers.

With its help, you can run your code at the moment when all images loaded in specific DOM element or elements controlled by jQuery selector. Like:

$('body').imagesLoaded( function() {
  // images have loaded
});

There are also .done, .fail, .progress callbacks supported if you need, so check the docs.

pttsky
  • 737
  • 5
  • 15
1

In some cases you have to wait until the image loads to get a parameter not specified in the <img> tag, such as height for example. Then you may use $(window).load

In other cases, for example, adding some classes to the images, you can do it before the image load.

If you want to load the images after the page loads completely or when the user really scroll and see each image, Lazy Load is a good plugin and it support callbacks.

Eduardo
  • 508
  • 6
  • 18
0

Images should load First as hidden, Then your script should run like

$(document).ready(function(){

// here do the scripting may be showing them one by one

});
sushil bharwani
  • 29,685
  • 30
  • 94
  • 128