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

Question

问题:

我在所有相关版本的Internet Explorer中实现递归图像延迟加载时遇到问题.我正在使用jQuery 1.3.2,后面的代码在Firefox,Safari和Chrome上运行得非常好.

虽然我希望IE6的javascript引擎会窒息,但我很惊讶地发现它在IE7上根本不起作用,而且偶尔也会在IE8上运行.它有时在IE8上运行是令人沮丧的,因为它似乎意味着如果我努力工作并在Microsoft脚本调试器中设置足够的断点,我可能会在经过一番努力后让它工作.

我知道我不必递归地执行此操作,如果我找不到合适的解决方案,我将重新实现它,但递归方法特别适用于此示例,因为我希望图像加载一个时间,美丽的连续.(我预计最大深度约为15)

我带着这个问题来到StackOverflow,因为我过去遇到过这样的问题,想知道是否有人对这个问题有什么见解:

• jQuery中的递归？
• 在IE [6-8]的javascript引擎中递归？
• IE中有错误的jQuery回调/方法链接[6-8]？
• 天真的实施？

码:

这是延迟加载函数:

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.*变量只是存储在全局对象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

在您尝试设置Element的src 之前,IE需要为图像定义onload事件.所有其他浏览器都可以正常处理; IE会窒息.

由于这个原因,上面的加载函数可能永远不会运行.

尝试一下:

   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);