$ ('# foo'). load () не ожидает загрузки изображения

Question

Я прочитал кучу постов, где это работает правильно для людей, но это просто не работает для меня. Обычно это означает ошибку пользователя, так что я делаю не так? Я пробовал на Firefox и Chrome. Обработчик .load () выполняет сценарий до полной загрузки изображения.

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

Попробуйте .load(checkBottom) и .load(playGal).

Answer 2

Если вы загружаете встроенные изображения, каждая функция типа «Готово», «Загрузка» и т. Д. Сделает изображения доступными. Для тех, кто на сервере умеет PHP, используйте на стороне сервера:

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

Встроенные изображения имеют большой размер, но они сжимаются gz_handler, если браузер может распаковать. В большинстве случаев они есть. Поскольку JPG будет снова сжат, а GIF будет меньше, я считаю это полезным. Извините за экскурсию по тел. Надеюсь, это был английский.

PS Если это изображение не одно из нескольких, подумайте о том, чтобы взять закодированное в base64 изображение для класса стиля. Вам нужно загрузить div с атрибутом class / id.

стиль:

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

корпус:

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

Это так быстро! и, кстати, Google не копировать это изображение. У меня есть веб-сайты с книжным шкафом, где каждый сплайн является изображением.

Медленно из-за загрузки изображения.

Быстро из-за стиля изображения.

Answer 3

Я до сих пор не могу заставить jquery .load () работать должным образом, но я создал функцию javascript, которая решает проблему. Мораль этой истории такова: когда библиотеки терпят неудачу, используйте основной язык.

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

Answer 4

попробуй

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

Answer 5

Чего вам не хватает, так это всей асинхронной модели.Это означает, что не существует функции, которая «ждет», чтобы что-то произошло.Вместо этого вы предоставляете обратный вызов.Это означает, что когда foo готов, сделайте это.Первое, что происходит, это начало: $(document).ready() вызывает предоставленную функцию, когда документ готов.Сама команда просто говорит браузеру, что нужно делать, когда документ готов.Поэтому сразу после этого замечает, что браузер переходит к следующей строке: setTimeout.Кроме того, только после загрузки документа начнется загрузка изображения, на которое вы ссылаетесь.Также загрузка jQuery: http://api.jquery.com/load/ принимает URL-адрес для загрузки в качестве первого аргумента, ни аргумент check, ни playgal не возвращают URL.

Answer 6

Вы хотите дождаться события onLoad изображения.