Проблема:
У меня проблемы с реализацией отложенной загрузки рекурсивного изображения во всех соответствующих версиях Internet Explorer. Я использую jQuery 1.3.2, и следующий код прекрасно работает на Firefox, Safari и Chrome.
Хотя я и ожидал, что движок javascript в IE6 захлебнется, я очень удивлен, обнаружив, что он не работает вообще в IE7 и только изредка в IE8. То, что это иногда работает в IE8, разочаровывает, потому что, кажется, подразумевает, что, если я буду достаточно усердно работать и устанавливать достаточно точек останова в отладчике сценариев Microsoft, я, возможно, заставлю его работать после некоторой борьбы.
Я знаю, что мне не нужно делать это рекурсивно, и я переопределю это, если не найду подходящего решения, но рекурсивный подход особенно подходит в этом примере, потому что я хотел бы, чтобы изображения загружать по одному, красиво в ряд. (И я ожидаю, что максимальная глубина около 15)
Я пришел в StackOverflow с этим вопросом, потому что сталкивался с такой проблемой в прошлом и хотел бы узнать, есть ли у кого-нибудь понимание того, в чем может быть проблема:
- рекурсия в jQuery?
- рекурсия в движке JavaScript [6-8]?
- ошибочные обратные вызовы / методы jQuery в IE [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>
...