$('#foo').load() does not wait for image to load

I've read a bunch of posts where this is working properly for people, but it simply does not work for me. This usually means user error, so what am I doing wrong? I've tried on both Firefox and Chrome. The .load() handler executes the script before the image fully loads.

function 开发者_如何学JAVAstart() {
    $(document).ready(function(){
        $('#topIMG').attr('src', slides3[topI]);
        $('#bottomIMG').attr('src', slides3[bottomI]);
    });
    sT2 = setTimeout('checkTop()',1);
}
function checkTop() {
    $('#topIMG').load(checkBottom());
}
function checkBottom() {
    $('#bottomIMG').load(playGal());
}
function playGal() {
    $(document).ready(function(){ 
        $('#topIMG').delay(5000).fadeTo(750, 0, function(){
            topI++;
            bottomI++;
            if (topI == slides3.length) {
                topI = 0;
            }
            if (bottomI == slides3.length) {
                bottomI = 0;
            }
            $('#topIMG').attr('src', slides3[topI]);
        });
        $('#topIMG').fadeTo(1, 1, function(){
            $('#bottomIMG').attr('src', slides3[bottomI]);
        });
    });
    sT2 = setTimeout("checkTop()",1); 
}

Try .load(checkBottom) and .load(playGal).

I still cant get jquery's .load() to work properly, but I created a javascript function that fixes the problem. The moral of the story is: when libraries fail, use the core language.

function checkLoad() {
    var topIMG = document.getElementById("topIMG");
    if(!topIMG.complete) {
        var checkT = setTimeout("checkLoad()", 250);
    }
    else {
        var bottomIMG = document.getElementById("bottomIMG");
        if(!bottomIMG.complete) {
            var checkT = setTimeout("checkLoad()", 250);
        }
        else {
            var playT = setTimeout("playGal()", 1);
        }
    }
}

If you load inline images, each event.function like ready, load and so on will make the images available. For those who's server is able to PHP, use on server side:

 ob_start('ob_gzhandler');
 function img2base64($filename,$filetype,$cut=1){
     $imgbinary=fread(fopen($filename,"r"),filesize($filename));
     $out=base64_encode($imgbinary);
     if($cut==1)$out=chunk_split($out);
     return "data:image/".$filetype.";base64,".$out;
     } 
 echo "<img src='".img2base64("myimage.gif","gif")."'><br>";
 echo "My favorit Image<br>";
 echo "<img src='".img2base64("myotherimage.jpg","jpeg")."'>";
 ob_end_flush();

The inline images have a big size, but they are compressed by the gz_handler if the browser is able to decompress. Most case they are. Because a jpg will be compressed again and gif will be smaller, I find that useful. Sorry for the excursion to php. Hope it was English.

PS If that image is not one of several, think of taking the base64 encoded image for a style class. You need to load a div with the class/id attribute.

style:

.myImage{display:block;width:XXpx;height:XXpx;
         background-image:url("data:image/png;base64,zMzADMzMwAAZgBm...")
        }

body:

<div class="myImage">&nbsp;</div>

It's so fast! and by the way google don't copy that image. I have websites with a bookcase where each spline is an image.

Slow because of image post load.

Fast because of image style.

You want to wait for the image's onLoad event.

What you're missing is the entire asynchronous model. This means that there is no function which 'waits' for something to happen. Instead what you do is provide a callback. This means that when foo is done, do this. The first place this happens is in start: $(document).ready() calls the provided function when the document is ready. The command itself merely tells the browser to note what to do when the document is ready. Therefore, immediately after it notes that the browser continues to the next line: setTimeout. Furthermore, only once the document is loaded will the image that you refer to in that start being loaded. Also jQuery's load : http://api.jquery.com/load/ takes the url to load as the first argument, neither check argument or playgal return a url.

try

var img = new Image();
$(img).load(function(){
  // do if image loads
}).attr({
  src: someImgSource
}).error({
  //do if load fails
});