How can I delay JavaScript code until all the images are loaded into memory

Question

I have no JavaScript knowledge. I'm trying to delay the $('#image').reel code until the image is loaded so I can get the image width value.

   stitched: imgwidth,
   loops: false,
   frames: 30,
   frame: 1,
   wheelable: false
   // speed: 0,
   // timeout: 1
}); 

function imageReel() {
    $('#image').empty();
    var image = '<img id="image" src=\'images/' + arrReel[imgcount] + '.png\' width="1000" height= "700" />';
    $('#image-wrapper').html(image);
    $('#image').reel({
        stitched: imgwidth,
        loops: false,
        frames: 30,
        frame: 1,
        wheelable: false
        // speed: 0,
        // timeout: 1
    });
    console.log(imgwidth);
}

Attempt 1 based on first answer

 $('#image').empty();
        // var image = '<img id="image" src=\'images/'+arrReel[imgcount]+'.png\' width="1000" height= "700" />';

      $(function(){
      image=new Image();
      image = '<img id="image" src=\'images/'+arrReel[imgcount]+'.png\' width="1000" height= "700" />';

        image.onload=function(){
           $('#image-wrapper').html(image);
           $('#image').reel({

            stitched:    imgwidth,
            loops:       false,
            frames:       30,
            frame:        1,
            wheelable: false, 
            // speed:       0,
            // timeout:     1
          }); 
    };
    $('body').append(image);
});

Result. Still gives me 0 width plus creates multiple images

Attempt 2 based on kilian's answer

 <div id="image-wrapper"><img id="image" src='images/outsidedark.png' width="1000" height= "700" onload="someFunction()" /></div>

        function someFunction()
        {
            console.log(imgwidth);
            $('#image').reel({

            // stitched:    3208,

            stitched:    imgwidth,
            loops:       false,
            frames:       30,
            frame:        1,
            wheelable: false, 
            // speed:       0,
            // timeout:     1
          });


        }

Result The image keeps getting loaded. Possible because of the plugin but I think I need onload to only load that function once and its loading it multiple times. The width is still 0 and because of the console log that 0 keeps getting displayed like its stuck in an infinite loop.

possible duplicate of [How can I determine if an image has loaded, using Javascript/jQuery?](http://stackoverflow.com/questions/263359/how-can-i-determine-if-an-image-has-loaded-using-javascript-jquery) — JJJ, May 17 '13 at 12:26
No, it's different. You need the image onload event for this one, not the document onload event. — Kilian Stinson, May 17 '13 at 12:33

score 2 · Accepted Answer · answered May 17 '13 at 12:32

2

Not sure what is reel jquery plugin(is it plugin?)... But following code shows real image width and height.

$(function(){
    var image=new Image();
    image.src='http://www.google.com/images/srpr/logo4w.png';

    image.onload=function(){
        console.log($(this).height());
        console.log($(this).width());
    };
    $('body').append(image);
});

I hope this helps.

answered May 17 '13 at 12:32

Ruslan Polutsygan

4,401
2
26
37

Yes it is a jquery plugin. – May 17 '13 at 12:45

d4rkpr1nc3 · Answer 2 · 2013-05-18T09:39:43.297

1

using image.onload = function () { //your code here } should work, but I have noticed that in some browsers (i.e Chrome) if the browser caches the image, the onload event no longer fires.

UPDATE:

After bit of research i've discovered this jQuery plugin which solves the problem with the browsers caching images. Also, it apears to be cross-browser. Give it a try.

edited May 18 '13 at 09:39

answered May 17 '13 at 12:35

d4rkpr1nc3

1,817
13
16

Ok I actually need it to work on the ipad. I have tried it but only in chrome so will give it a try on the ipad. – May 17 '13 at 12:44

score 0 · Answer 3 · answered May 17 '13 at 12:25

0

you should use the load() event.

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

answered May 17 '13 at 12:25

RRikesh

14,112
5
49
70

2

the image is not part of the dom on `load`. he inserts the image dynamically. – Kilian Stinson May 17 '13 at 12:28
Also: `load()` is deprecated as of jQuery 1.8; it's in the page you linked to. – David Thomas May 17 '13 at 12:37

score 0 · Answer 4 · answered May 17 '13 at 12:25

0

Attach an onload event to your image element.

<img onload="someFunction()" ... >


function someFunction() {
    // image.reel part
}

answered May 17 '13 at 12:25

Kilian Stinson

2,376
28
33

How can I delay JavaScript code until all the images are loaded into memory

4 Answers4