Wait until all images are loaded after changing their src

Question

I've got project in which after document is fully loaded I have to change images src attributes (fix them a little bit).

What I would like to have is the option to check whether all images after thier src attribute is changed are fully loaded so that I can then calculate their height and based on that proceed with my code.

Is this possible ?

out of curiosity... what do you mean with "fix them a little bit". If you change the src, that could cause another image to be loaded. Just wanted to be sure that's what you're looking for. — Claudio Redi, Sep 21 '12 at 20:37
thats right, replace images with new ones and then how to be sure when all of them are fully loaded — gruber, Sep 21 '12 at 20:41

jtheman · Answer 1 · 2012-09-21T20:42:47.977

4

You can do with jQuery:

$('img#newsrc').load(function(){  // this triggers after image is loaded

    // do your checking

}

Or a specific image:

var file = 'beautiful.jpg';
$('img').attr('src', file).load(function() {  
    alert(file + 'is loaded');  
});

edited Sep 21 '12 at 20:42

answered Sep 21 '12 at 20:34

jtheman

7,421
3
28
39

the document is fully loaded, then I change src of all images, then I want to know when new images are fully loaded. – gruber Sep 21 '12 at 20:38
OK I get you. You could use $('img').load(function() – jtheman Sep 21 '12 at 20:40
1

use $('img').load(function(): doesnt work... not always good result – gruber Sep 21 '12 at 20:52
This might help you: http://stackoverflow.com/questions/2392410/jquery-loading-images-with-complete-callback – jtheman Sep 21 '12 at 20:56

score 0 · Answer 2 · answered Sep 21 '12 at 20:49

If you want to do something after ALL the images on the page are loaded try this:

$(document).ready(function () {
  var nImages = $('img').length;
  $('img').load(function () {
    nImages--;
    if (nImages == 0) {
      ... do whatever ...
    }
  }
});

If you don't want to include all the images, just change the selector 'img' to something more specific.

Wait until all images are loaded after changing their src

2 Answers2