Знайте, когда изображения будут сделаны, загружаясь в ответе Ajax

Question

Знайте, когда изображения будут сделаны, загружаясь в ответе Ajax

Я надеюсь, что это помогает. Я просто добиваюсь цели float луг кнопки направо.

Этот путь Prev кнопку оставляют Next, кнопка, но эти Next на первом месте в структуре HTML:

.f {
  float: right;
}
.clr {
  clear: both;
}

<form action="action" method="get">
  <input type="text" name="abc">
  <div id="buttons">
    <input type="submit" class="f" name="next" value="Next">
    <input type="submit" class="f" name="prev" value="Prev">
    <div class="clr"></div><!-- This div prevents later elements from floating with the buttons. Keeps them 'inside' div#buttons -->
  </div>
</form>

Редактирование: Преимущества по другим предложениям: никакой JavaScript, доступный, обе кнопки, не остается type="submit"

11

jquery ajax image load preload

задан Tim Cooper 30 August 2011 в 02:43

3 ответа

$ ("img"). Load () не будет работать, потому что изображения загружаются динамически; эта команда будет применяться только к изображениям на странице в данный момент.

используйте $ ("img"). live ("load") , чтобы отслеживать, когда изображения загружены.

0

ответ дан 3 December 2019 в 05:13

Это обновленная версия кода, предоставленного tvanfosson.

Вы должны убедиться, что переменная imageCount считает список узлов, а не строку, как это было проблемой в оригинальном коде, из которого я могу сделать вывод:

$.ajax({
    url      : 'somePage.html',  
    dataType : "html",
    success  : function(data) {

        $(data).hide().appendTo('#someDiv');

        var imagesCount = $('#someDiv').find('img').length;
        var imagesLoaded = 0;

        $('#someDiv').find('img').load( function() {
            ++imagesLoaded;
            if (imagesLoaded >= imagesCount) {
                $('#someDiv').children().show();
            }
        });

        var timeout = setTimeout(function() {
            $('#someDiv').children().show();
        }, 5000);
    }                     
});

10

ответ дан 3 December 2019 в 05:13

Другие вопросы по тегам:

jquery ajax image load preload

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

score 12 · Accepted Answer

Вам необходимо добавить обработчик нагрузки в обратный вызов AJAX, чтобы он применялся к изображениям, загружаемым через вызов AJAX. Вы также можете установить таймер для отображения содержимого через некоторый интервал на случай, если изображения будут загружены до применения обработчика нагрузки.

$.ajax({
     ...
     success: function(data) {
          var imageCount = $(data).filter('img').length;
          var imagesLoaded = 0;
          $(data).hide()
                 .appendTo('#someDiv')
                 .filter('img')
                 .load( function() {
                     ++imagesLoaded;
                     if (imagesLoaded >= imageCount) {
                        $('#someDiv').children().show();
                     }
                  });
          setTimeout( function() { $('#someDiv').children().show() }, 5000 );
      }
});