Internet Explorer中的递归映像延迟加载失败(6-8)

Question

问题：

在Internet的所有相关版本中，实现递归映像延迟加载都有困难。我使用的是jQuery 1.3.2，下面的代码在火狐、Safari和Chrome上运行得非常好。

虽然我预计IE6的javascript引擎会窒息，但我很惊讶地发现它在IE7上完全不工作，只是偶尔在IE8上工作。它有时在IE8上工作是令人沮丧的，因为它似乎意味着如果我在Microsoft调试器中工作得够努力并设置足够的断点，那么经过一番挣扎，我也许会让它工作起来。

我知道我不需要递归地这样做，如果找不到合适的解决方案，我会重新实现它，但是在这个例子中，递归方法特别合适，因为我希望图像能够同时加载一个，非常漂亮地连续加载。(我预计最大深度在15度左右)

我带着这个问题来到StackOverflow，因为我遇到过类似这样的问题，我想知道是否有人对这个问题有任何洞察力：

在ie6-8的javascript引擎中jQuery?

• recursion中的
• 递归？
• 故障jQuery回调/方法-在ie6-8
• 朴素implementation?

中的链接。

代码：

以下是延迟加载函数：

jQuery.lazyLoadImages = function(imgSelector, recursive, fadeIn)
{
  var image = $(imgSelector);
  if (image.size()) {
    image.parents(SAH.imageContentSelector).addClass(SAH.loadingClass);
    // the img src attribute is stored in the alt attribute
    var imgSrc = image.attr('alt');
    image.attr('src', imgSrc).attr('alt','').load(function() {
      $(this)
      .removeClass(SAH.lazyLoadClass)
      .parents(SAH.imageContentSelector)
      .removeClass(SAH.loadingClass);
      if (fadeIn) $(this).fadeIn(SAH.lazyLoadDuration);
      if (recursive) {
        var nextPos = eval(parseInt(imgSelector.replace(/.*position-(\d+).*/,'$1')) + 1);
        var nextImage = imgSelector.replace(/position-(\d+)/,'position-' + nextPos);
        $.lazyLoadImages(nextImage, recursive, fadeIn);
      }
    });
    return true;
  } else {
    return false;
  }
}

变量只是存储在全局对象SAH中的变量。下面是调用$.lazyLoadImages()的相关部分：

// fade the first image in with the navBar
var firstGalleryImageSelector = 'img#img-position-1-' + galleryId + '.' + SAH.lazyLoadClass;
$.lazyLoadImages(firstGalleryImageSelector,false,true);
navBar.show('slide', { direction: 'right' }, function() {
  // load the rest after the navBar callback
  $.lazyLoadImages(firstGalleryImageSelector.replace(/position-1/,'position-2'), true, true);
});

对$.lazyLoadImages()的第一次调用是非递归的；第二次是递归的，在导航条滑到窗口后触发。

最后，下面是相关的html：

<div id='position-1-i4design' class='content image' style='width:400px'>
  <div class='image-gallery'>
    <a class='local-x' href='#position-1-i4design'>
      <img alt='/images/press/i4design/i4design-1.jpg' id='img-position-1-i4design' class='lazy-load hide'>
    </a>
    ...
  </div>
  ...
</div>

<div id='position-2-i4design' class='content image' style='width:389px'>
  <div class='image-gallery'>
    <a class='local-x' href='#position-2-i4design'>
      <img alt='/images/press/i4design/i4design-2.jpg' id='img-position-2-i4design' class='lazy-load hide'>
    </a>
    ...
  </div>
  ...
</div>

<div id='position-3-i4design' class='content image' style='width:398px'>
  <div class='image-gallery'>
    <a class='local-x' href='#position-3-i4design'>
      <img alt='/images/press/i4design/i4design-3.jpg' id='img-position-3-i4design' class='lazy-load hide'>
    </a>
    ...
  </div>
  ...
</div>

...

Answer 1

在尝试设置元素的src之前，IEs需要为图像定义onload事件。所有其他浏览器都会处理得很好；IEs会窒息。

由于这个原因，上述的load函数很可能永远不会运行。

试试看：

   image.attr('alt','').load(function() {
      $(this)
      .removeClass(SAH.lazyLoadClass)
      .parents(SAH.imageContentSelector)
      .removeClass(SAH.loadingClass);
      if (fadeIn) $(this).fadeIn(SAH.lazyLoadDuration);
      if (recursive) {
        var nextPos = eval(parseInt(imgSelector.replace(/.*position-(\d+).*/,'$1')) + 1);
        var nextImage = imgSelector.replace(/position-(\d+)/,'position-' + nextPos);
        $.lazyLoadImages(nextImage, recursive, fadeIn);
      }
    }).attr('src', imgSrc);

Answer 2

我用递归的JavaScript函数做了一些类似的事情来加载图像，它在IE中工作得很好。

我能看到的主要区别是：

• I使用的是普通的JavaScript函数，而不是jQuery函数。
• I用jQuery创建了每个映像，并将其添加到相关容器中。

我不确定这两个点是否重要，但是看看您的代码，我猜一些更昂贵的函数将引用该图像的父母两次，同时也会使图像变暗。

如果注释掉了，它会成功运行吗？