Question

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

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

我想只显示div {my $('#boardContent').show();，一旦所有图片都从我获取的数据中加载了。

Answer 1

我这样做的方式 - 你真的可能只需要担心从其他地方获取内容的元素，比如图像 - 是要计算需要加载和使用加载事件处理程序的元素关于所有这些要素。加载所有元素后，让处理程序触发show。作为一个逆止器，你需要设置一个定时器来触发该节目，以防在应用处理程序之前加载一些元素。

$.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();
});

Answer 2

您可以扫描<img>元素的HTML数据，然后通过预加载器运行它们，这些预加载器指定的“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];
                }
            }
        });

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

2 个答案: