Вопрос по jquery, image – Проверьте, завершены ли динамически загруженные изображения

3

У меня есть код, который публикует скрипт php, который читает все файлы в папке и возвращает их, все они являются изображениями, jquery анализирует информацию, в переменной, которая представляет собой массив, каждое изображение сохраняется как изображение. Объект с src, width, height и attr, при успешном завершении. Я хочу проверить, загружено ли каждое изображение, а затем, наконец, при полном запуске другой функции и удалить div. Но я не знаю, как проверить, полностью ли загружено изображение, я дурачился с .complete, но загрузка никогда не кажется, функция вызывает его до тех пор, пока img не будет загружена, а затем вернет true, так что может продолжать идти. здесь код, он немного грязный и, вероятно, не очень хороший код.

var gAllImages = [];
function checkFed()

{
    var leni = gAllImages.length;   
    for (var i = 0; i < leni; i++) {


        if (!gAllImages[i].complete) {
            var percentage = i * 100.0 / (leni);
            percentage = percentage.toFixed(0).toString() + ' %';
            console.log(percentage);
            //  userMessagesController.setMessage("loading... " + percentage);
            checkFed();

            return;

        }

    //userMessagesController.setMessage(globals.defaultTitle);
    }
}


 if($('slideshow')){
 var topdiv = '<div id="loading"><div class="centered"><img src="/karlaacosta/templates/templatename/images/ajax-loader.gif" /></div> </div>';
    $('#overall').append(topdiv);
    //console.log('alerta');
    var jqxhr = $.post('http://localhost/karlaacosta/templates/templatename/php/newtest.php', function(data){



        var d = $.parseJSON(data);
        //console.log(d[1]);



        if(typeof(d) == 'object' && JSON.parse){
            var len = d.length;
            //console.log(len);



            for(var i = 0; i < len; i++){
                var theImage = new Image();
                var element = d[i].split('"');
                //        console.log(element);
                //      console.log(element[4]);
                theImage.src = '/karlaacosta/images/Fotografia/TODO'+element[0];
                theImage.width = element[2];
                theImage.height = element[4];                   
                theImage.atrr = element[6];
                gAllImages.push(theImage);

            }





        // console.log(html);
        }else{
            console.log('error');
        }
    }).success(function (){




    setTimeout('checkFed', 150);




    }).error(function(){
        var err = '<div id="error"><h2>Error: Lo sentimos al parecer no se pueden cargar las imagenes</h2></div>';
        $('#loading').append(err);

    }).complete(
        function(){
            var len = gAllImages.length;
            var html = '<ul class="slides">'    
            for(var i = 0; i < len; i++){
                html += '<li><img src="'+gAllImages[i].src+'" width="'+gAllImages[i].width+'" height="'+gAllImages[i].height+'" attr="'+gAllImages[i].attr+'" /></li>';


            }
            html += '</ul>';
            $('#slideshow').append(html);
        }
        );
 jqxhr.complete(function(){
    //
    imageSlide();
    $('#loading').remove();
    //
    console.log('completed');
});
}

Если я возьму рекурсивность checkFed (), очевидно, что скрипт завершится, и когда изображения помещаются в html, они загружаются нормально и быстро, в кеше никогда не загружается? любые другие предложения в других частях кода также приветствуются.

Вы можете использовать функцию обратного вызова img load. / Stackoverflow.com вопросы / 3877027 / ... lucuma
У меня нет времени, чтобы проанализировать и ответить на это прямо сейчас, но просто заметьте, чтоsetTimeout(checkFed(), 4000); делаетн графикcheckFed через четыре секунды. РаботаетcheckFed сраз а затем передает свой возврат стоимости вsetTimeout. Я не вижу этогоcheckFed возвращает функцию, так что это может быть частью проблемы. Удалить() послеcheckFed если ваша цель - запланировать запуск на четыре секунды позже. T.J. Crowder
Я хотел бы ответить на этот вопрос, но сейчас у меня нет времени. Похоже, что предоставленные ответы не помогут. Alexander

Ваш Ответ

2   ответа
6

загружено ли каждое изображение, а затем, наконец, на полную остановку другой функции и удалить div. Но я не знаю, как проверить, полностью ли загружено изображени

По сути, проверка успешности загрузки изображения проста:

var theImage = new Image();
var element = d[i].split('"');
$(theImage).load(function() {
    // The image has loaded (from cache, or just now)
    // ...do something with the fact the image loaded...
});
theImage.src = '/karlaacosta/images/Fotografia/TODO'+element[0];

Главное, что нужно сделать, это зацепиload мероприятиед вы установили егоsrc. Если вы установитеsrc сначала, и изображение находится в кеше,loadобытие @ может сработать до того, как следующая строка кода перехватит его, и вы пропустите его.

Вот пример: Живая копия | источни

HTML:

<img src="http://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG">
<p>When you see the image above, 
<input type="button" id="theButton" value="Click Me"></p>

JavaScript:

jQuery(function($) {

  $("#theButton").click(function() {
    var img = document.createElement('img');
    $(img).load(function() {
      display("Image <code>load</code> event received");
    });
    img.src = "http://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG";
    document.body.appendChild(img);
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
});

Как видите, я использую тот же imgsrc в каждом случае. И надежно на каждом браузере, который я когда-либо пробовал, яделат получитьload мероприятие

Событие .load не будет срабатывать в некоторых браузерах после его кэширования. Вы должны проверить наличие кэшированной копии. Fresheyeball
@ SamuelLopez: добавлен пример. T.J. Crowder
Спасибо, отличный ответ и объяснение сработало очень хорошо! Samuel Lopez
но как он может проверить, загружены ли изображения полностью, если у него нет src? Вы просто прикрепляете событие, чтобы потом проверить, завершено ли оно? Samuel Lopez
@ SamuelLopez:В не проверяет; браузер сделает это за вас. Сначала вы подключаете событие. Затем вы установитеsrc, что позволяет загружать изображение (оно не может загружаться безsrc). В этот момент, если изображение находится в кеше, символload событие обратного вызова будет запланировано; но если вы еще не подключили его, этого не произойдет, потому что браузер посмотрит цепочку обработчиков событий и увидит, что обработчики не подключены. Обратный вызов будет фактически выполняться в следующий раз, когда механизм JS (в данном случае однопоточный) будет простаивать, что будет после (очень) короткой паузы. T.J. Crowder
1

ширования браузера и странностей модели событий. Попробуйте imagesLoaded или waitForImages.

https: //github.com/desandro/imagesloade

https: //github.com/alexanderdickson/waitForImage

Это правда, вы всегда можете исправить свою собственную систему, но эти плагины являются зрелыми и надежными. Если вы хотите посмотреть, как они написаны, если вы хотите увидеть вызов здесь. Fresheyeball
... если плагин может сделать это, почему не может родной код? это все плагин, верно? Kevin B
спасибо за ссылки на плагины, я проверю их все жестко, я предпочитаю не использовать плагины Samuel Lopez
Я проверял эти плагины, но похоже, что они проверяют наличие элемента DOM, если он загружен, и я хочу проверить, не загружены ли изображения в кэш, или я что-то пропустил? Я только что посмотрел, я проверю их подробно позж Samuel Lopez
это в основном это. Если вы можете надежно воспроизвести его без плагина и хотите сделать это, больше возможностей для вас. Fresheyeball

Похожие вопросы