jquery - jQuery img.load 问题

Question

我正在使用 jQuery循环插件来循环浏览一些图像。这些图像都包含在 DIV 中。我不希望循环插件在加载完所有图像之后运行，或者至少在前 4 或 5 个图像加载之后才运行，这样就不会出现尚未加载的图像。有没有一种简单的方法可以做到这一点？

我尝试在 div 中的最后一个 img 中添加一个类 'lastImg' 并向其中添加一个 'load' 事件，例如

Markup
<div id='cycle'>
  <img src=''/>
  <img src=''/>
  <img src='' class='lastImg'/>
</div>

JQuery
    $('lastImg').load(function(){
      $('#cycle').cycle({..});
    });

这在 Chrome 和 FF 中似乎没问题，诚然它有点脆弱（有时它不起作用，也许如果图像在缓存中？）而在 IE 中则完全没有（惊喜，惊喜......）。

关于我如何做到这一点的任何其他建议？

score 3 · Accepted Answer

标记：

<div id='cycle'>
  <img src='path1' class='preload' />
  <img src='path2' class='preload' />
  <img src='path3' class='preload'/>
</div>

试试这个：

var cyclerLoaded = false;
var numberOfPreloaded = 0;

function imageLoaded()
{      
  numberOfPreloaded++;

  if (numberOfPreloaded >= 4 && !cyclerLoaded)
  {
    $('#cycle').cycle({..});
    cyclerLoaded = true;
  }
}

$(document).ready(function()
{      

  $('img.preload').each(function()
  {
    // Get image instance.
    var image = new Image();
    image.src = $(this).attr('src');

    if (image.complete)        
      imageLoaded();        
    else        
      image.onload = imageLoaded;

  });

});

...preload类附加到您要预加载的所有图像的位置。

score 3 · Accepted Answer

为什么不在文档的加载事件中连接循环插件？下载所有工件后，将触发 Document 的 load 事件。[当 DOM 可用时触发就绪事件。]

尝试

$(document).load(function() { //your cycle plugin hookup } );

score 2 · Accepted Answer

更好的方法是编写一个函数来预加载足够数量的图像，然后调用循环函数。因为页面中图像的加载方式、时间和顺序可能因浏览器或其他情况而异。

这是ajaxian的一个很棒的小功能，它可以预加载页面中引用的样式表中的所有可用图像。

score 0 · Accepted Answer

您的代码中的一件事是您正在使用$('lastImg')，但它应该是$('.lastImg').

因此，您的代码将永远不会运行。

jquery - jQuery img.load 问题

4 回答 4

Related

Reference