在触发 JQuery 幻灯片之前加载所有图像

Question

我已经修改了 Visual Idiot 的 Unslider (http://unslider.com/) 以适应基于图像比例的多宽度幻灯片，但在此过程中，我遇到了一个错误，导致幻灯片加载为小缩略图（我认为在图像没有完全加载的情况）。这就是问题#1。所以我试图等到所有图像都加载完毕。但是我还没有找到成功的方法。这是问题 #2。

这是我在 Unslider init() 函数中添加的代码：

_.init = function(el, o) {
  //  Check whether we're passing any options in to Unslider
  _.o = $.extend(_.o, o);

  _.el = el;
  _.ul = el.find(_.o.items);
  _.max = [el.outerWidth() | 0, el.outerHeight() | 0];
  _.max = [100, 100];
  _.li = _.ul.find(_.o.item).each(function(index) {
    var me = $(this);
    var an_image = me.find('img');
    an_image.load(function() {
      width = an_image[0].naturalWidth,
      height = an_image[0].naturalHeight;

      setSlideHeight(an_image, width, height, 300, 20);
      if ( an_image.parent().parent().is(":last-child") ) {

        _.el.css("width", 900);
      }
    })  

    //  Set the max values
    //if (width > _.max[0]) _.max[0] = width;
    //if (height > _.max[1]) _.max[1] = height;
  });

这是我的 Ruby 部分，其中包含一个内联脚本，用于在加载所有图像时触发 Unslider。

<% if @page.cap_gallery_images.any? %>
  <script>
    $(document).ready(function() {
      var numLoaded = 0;
      var numToLoad = $('#gallery img').length;
      alert("To Load: " + numToLoad);
      $('#gallery img').load(function(){
        numLoaded += 1;
        alert("Loaded: " + numLoaded);
        if (numLoaded == numToLoad) {
          var gallery = $('#gallery').unslider(),
          data = gallery.data('unslider');
          data.to(0);
        }
      });
      $("#slidecontainer .slide a").click(function(e) {
        destination = $(this).parent().index();
        data.to(destination);
        e.preventDefault;
      });
      $(window).scroll(function() {
        checkGalleryAgainstLogo();
      });
      $(window).resize(function() {
        checkGalleryAgainstLogo();
      });
      checkGalleryAgainstLogo();
      $('#logo.small').addClass('white');
    });
  </script>
<% end %>

问题在于，图像加载处理程序似乎并未全部触发。在我使用它的页面的上下文中查看它：http://penumbra-2.herokuapp.com/education

Answer 1

关于#2：我认为你把它弄得太复杂了。您不必像现在这样检查单个 img 资产；你真的只是想知道整个画廊何时加载，所以让你的生活变得简单：

  $('#gallerycontainer').load(function(){
      $('#gallery').unslider();
    }
  });

您可能希望将 HTML 添加到您的问题中，以便人们知道如何定位 jQuery：

<div id="gallerycontainer">
  <div id="gallery">
    <div id="slidecontainer">
      <div class="slide">
        <a href="#"><img /></a>
      </div>
    </div>
  </div>
</div>

Answer 2

当一个元素和所有子元素都被完全加载后，加载事件就会被发送到该元素。 .load 是您所需要的。使用它的一个优点是您可以将它附加到 DOM 的子集。如果您在这样的部门中有图像

<div class="slider">
  <img src="image1.jpg"/>
  <img src="image2.jpg"/>
  <img src="image3.jpg"/>
</div>

如果所有图像都已加载，现在您可以仅在幻灯片容器上使用 .load。

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

注意：如果您使用的是 jQuery 1.8，则已弃用。 您可以将 .on 与适当的参数一起使用 例如.on('load', handler)

Answer 3

我可以看到两种不同的解决方案，这取决于您的目标。

在您使用的代码上，$(document).ready(); 在 DOM 准备就绪时触发，而不是在资源完全下载时触发​​，因此检测图像何时加载是有意义的，但在这种情况下，我会去使用本机 Image() 对象并避免使用.load()，因为我发现它在某些情况下非常不可靠，而且据我所知，如果从浏览器缓存中加载图像，有时它也不会完美触发。

$('#gallery img').each(function() {
    var currentimage = new Image();
    currentimage.src = this.src;
    currentimage.onload = function(){
        numLoaded += 1;
        alert("Loaded: " + numLoaded);
        if (numLoaded == numToLoad) {
            var gallery = $('#gallery').unslider(),
            data = gallery.data('unslider');
            data.to(0);
        }
    };
});

另一个解决方案（我更喜欢在这里使用）是使用window.onload，它会在您的文档和资产完全下载时触发​​，您应该以这种方式使用它：

window.onload = function(){
    // Initialise your slider here
}

Answer 4

试试这个（模式）

html

<!-- load images container, images with document, `display:none` -->
        <div id="slidecontainer" style="display:none;">
            <div class="slide"> <a href="#">
              <img alt="Chemistry-1" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/chemistry-1.jpg" />
            </a>

            </div>
            <div class="slide"> <a href="#">
              <img alt="Hamilton" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/Hamilton.jpg" />
            </a>

            </div>
            <div class="slide"> <a href="#">
              <img alt="Platinum6" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/platinum6.jpg" />
            </a>

            </div>
            <div class="slide"> <a href="#">
              <img alt="Lectures-1-2" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/lectures-1-2.jpg" />
            </a>

            </div>
            <div class="slide"> <a href="#">
              <img alt="Lenses-1-2" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/lenses-1-2.jpg" />
            </a>

            </div>
            <div class="slide"> <a href="#">
              <img alt="Bromoil-1" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/bromoil-1.jpg" />
            </a>

            </div>
            <div class="slide"> <a href="#">
              <img alt="Platinum2-1" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/platinum2-1.jpg" />
            </a>

            </div>
            <div class="slide"> <a href="#">
              <img alt="Schaefer2" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/Schaefer2.jpg" />
            </a>

            </div>
            <div class="slide"> <a href="#">
              <img alt="Classroom-1-2" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/classroom-1-2.jpg" />
            </a>

            </div>
            <div class="slide"> <a href="#">
              <img alt="Dagbeq_web" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/dagbeq_web.jpg" />
            </a>

            </div>
            <div class="slide"> <a href="#">
              <img alt="Carbon_schaefer" class="center-slide" src="https://test-penumbra-images-cap.s3.amazonaws.com/uploads/Carbon_Schaefer.jpg" />
            </a>

            </div>
        </div>

    <div id="gallerycontainer">
        <div id="gallery" style="margin-top: 67px;"></div>
    </div>

js

// hold jquery `ready` `event`
$.holdReady(true);
// load images container, images into `slider` container
$("#gallery").load(document.location.href + " #slidecontainer", 
  function(data, textStatus, jqxhr) {
    // if all images loaded (11), document.ready, release `holdReady`
    return ($("#gallery img").length === 11 
              && $.isReady 
              && jqxhr.state() === "resolved"
            ? $.when($.holdReady(false)).done(function() {                    
                alert($.isReady);  
                $("#slidecontainer").css("display", "block");
                // images appended to document,                  
                // do (`slider`) stuff                   
              }) 
            : alert(!$.isReady) )
});

jsfiddle http://jsfiddle.net/guest271314/tLca3/

Answer 5

有一个专门为此构建的库，这是我在处理图像加载时经常使用的库，因为它还处理缓存的图像。你可以在https://github.com/desandro/imagesloaded找到它

您可以在整个图像列表上调用它，使用它时jQuery是可选的。

Answer 6

DOM ready event 等到 DOM 完全加载后再触发它的回调。然而，load (window) event 在 DOM 和所有图像完全加载之前不会触发它的回调。这是您要定位的事件：

$(window).load(function() { //Wait till DOM and images are fully loaded
                            //The run the code in here
    //**This is where/when to initialize the plugin.**
});

load 事件被发送到一个元素，当它和所有子元素 已完全加载。此事件可以发送到任何元素 与 URL 关联：图像、脚本、框架、iframe 和 窗口对象。