Как я могу загрузить изображение асинхронно с помощью jQuery и как узнать, когда загрузка изображения завершена?

Question

Как я могу загрузить изображение асинхронно с jQuery и как узнать, когда загрузка изображения завершена?

Answer 1

Как проверить, загружено ли изображение . Используется функция jquery ajax load ().

Answer 2

В jQuery был метод загрузки, который можно использовать для уведомления о загрузке изображения. Так что в вашем случае вы бы использовали jquery для создания ajax-запроса, который возвращал бы src к изображению, а затем создавал новый объект изображения и применял метод загрузки, как показано ниже.

var $img = $('<img>');
$img.attr('src', 'image.jpg').load(function() {
   alert('Image Loaded');
   //use jquery here to insert your image into the DOM
});

Надеюсь, это понятно. Я предполагал, что вы знаете, как сделать запрос ajax, если спрашиваете о загрузке изображения.

Спасибо Ник

Answer 3

Загрузка изображения JQuery

В нашей базовой версии у нас будет один div, содержащий загрузочный счетчик, и как только наше большое изображение будет загружено (в фоновом режиме), мы удалим счетчик и вставим наше изображение.

Вы знаете, когда изображение было успешно загружено, когда исполнение достигает функции, указанной в опции success, например ::

$.ajax({
  url: 'image-map.php',
  data: 'img=' + i.src, // the image url links up in our fake database
  dataType: 'html',
  success: function (html) {
    // because we're inside of the success function, we must refer
    // to the image as 'img' (defined originally), rather than 'this'
    $('#loader')
      .removeClass('loading')
      .append(img)
      .append(html);

    // now show the image
    $(img).fadeIn();
  }
});