Question

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 start() {
    $(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); 
}

Answer 1

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);
        }
    }
}