$ .get仅在内容（包括图像）准备就绪后才能加载和显示div中的内容

我正在使用get将内容加载到div然后显示它。很好，很容易。

$.get($(this).attr("href"), function (data) { 
    $('#boardData').html(data); 
    $('#boardContent').show(); 
    $('#BoardImages a').lightBox(); 
});

我想只显示DIV，我$('#boardContent').show();，一旦所有的图像都从我的数据，我通过我获取了加载。

来源

2009-11-10 Slee

的方式，我已经做到了这一点 - 你真的可能只需要担心的是从其他地方得到他们的内容元素，如图像 - 是保持该元素的计数需要在所有这些元素上加载和使用加载事件处理程序。当所有元素都被加载后，让你的处理程序触发节目。作为一个backstop，你需要设置一个计时器来触发显示，以防在应用处理器之前加载一些元素。

$.get($(this).attr("href"), function (data) { 
     var images = $(data).find('img'); 
     var imageCount = images.length; 
     var loaded = 0; 
     var timer = setTimeout(function() { 
       timer = null; 
       $('#boardContent:hidden').show(); 
     }, 10000); 
     images.load(function() { 
      ++loaded; 
      if (loaded >= imageCount) { 
      if (timer) clearTimeout(timer); 
      timer = null; 
      $('#boardContent:hidden').show(); 
      } 
     }); 

     $('#boardData').html(data); 
     $('#BoardImages a').lightBox(); 
});

来源

2009-11-10 14:40:32 tvanfosson

这使我在正确的道路上，setTimeout是一个问题，虽然它总是被创建，我不止一次地加载内容到这个div，我将如何取消setTimeout？我猜在if（loaded> = imageCount）？ – Slee 2009-11-10 15:25:03

在加载处理程序之前创建超时并将其分配给变量。清除装载处理程序中的超时，如果它尚未被删除。 – tvanfosson 2009-11-10 15:35:38

这就是我所做的 - 谢谢！ – Slee 2009-11-10 15:40:12

你可以扫描HTML数据<img>元素，然后通过预加载其“的onComplete”运行它们回调指定包含$('#boardContent').show();

编辑：

下面是我为自己在写一个插件另一个项目...

 jQuery.extend(jQuery, { 
      imagesToLoad: 0, 
      loadedImages: [], 
      preloadImages: function(){ 
       var settings = { 
        urls : [], 
        begin : function(){}, 
        each : function(){}, 
        complete : function(){}, 
        scope: window 
       }; 
       jQuery.extend(settings, arguments[0]); 
       var images = []; 

       jQuery.imagesToLoad = settings.urls.length; 

       settings.begin.call(settings.scope, settings.urls); 
       for(var i = 0; i = jQuery.imagesToLoad){ 
          settings.complete.call(settings.scope,jQuery.loadedImages); 
         } 
        } 
        images[i].src= settings.urls[i]; 
       } 
      } 
     });

来源

2009-11-10 14:39:59 JasonWyatt

$ .get仅在内容（包括图像）准备就绪后才能加载和显示div中的内容

回答

相关问题