javascript - 通过 jquery ajax 加载图像的事件处理程序

Question

我正在使用 jquery$("selector").load("url")方法从服务器加载大型标记。但就我而言，我在该响应 html 中有许多大图像。这些图像的渲染速度非常缓慢。所以我想放置一个加载指示器，直到所有图像完全渲染。然后在所有图像完全渲染后删除该指示器。如何使用 jqueryload方法实现这一点。

提前致谢。

Answer 1

一种方法是加载指示符document.ready并将其隐藏在加载回调函数中

$(function(){
  //show you loader indicator
  $('#indicator').show();
  $("selector").load("url",function(){
     //indicator hide 
     $('#indicator').hide();
 })
});

这只是一个让您开始的示例...加载完成时调用加载的回调函数...但是您可以在需要的任何地方显示指示器..只需在加载完成时将其隐藏。

Answer 2

您可以使用.load附加到任何 DOM 元素的事件，例如：

<div class="images" style="display:none;">
  <img src="img.png"/>
  <img src="img2.png"/>
  <img src="img3.png"/>
</div>

现在您可以在加载事件处理函数中附加您的操作：

$('.images img').load(function(){
   $('.images').show();
   //--Your code goes here //--
});