如何使用jQuery异步加载镜像，以及如何知道镜像加载何时完成？

Question

如何使用jQuery异步加载镜像，以及如何知道镜像加载何时完成？

Answer 1

JQuery Image Loading

在我们的基本版本中，我们将有一个包含加载微调器的单一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();
  }
});

Answer 2

How to check that image is loaded。它使用jquery ajax load()函数。

Answer 3

jQuery有一个load方法，可用于在图像下载后通知您。因此，在您的示例中，您将使用jquery发出一个ajax请求，该请求将向图像返回一个src，然后创建一个新的图像对象并应用如下所示的load方法。

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

我希望这是很清楚的。如果您询问有关图像加载的问题，我假设您知道如何发出ajax请求。

谢谢，尼克