Geek Answers Handbook

Recursive image with lazy loading in Internet Explorer (6-8)

Problem:

I am having trouble implementing a recursive image of lazy loading in all relevant versions of Internet Explorer. I am using jQuery 1.3.2 and the following code works fine on Firefox, Safari and Chrome.

While I would expect the javascript JavaScript engine to strangle, I am very surprised to find that it does not work at all on IE7, and only occasionally on IE8. The fact that it sometimes works on IE8 is disappointing because it seems to imply that if I work hard enough and set enough breakpoints in the Microsoft script debugger, I will probably earn it after some struggle.

I know that I don’t need to do this recursively, and I will redefine it if I don’t find a suitable solution, but the recursive approach is especially suitable in this example, because I would like the images to load one at a time, beautifully in a row. (And I expect a maximum depth of about 15)

I came to StackOverflow with this question because I ran into a problem like this in the past and would like to know if anyone has any idea what might be the problem:

  • jQuery recursion?
  • recursion in IE [6-8] javascript engine?
  • faulty jQuery callbacks / chaining methods in IE [6-8]?
  • naive implementation?

code:

Here is the lazy-load function:

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 variables. * are simply variables stored in the global SAH object. Here is the relevant section that calls $ .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); });

The first call to the $ .lazyLoadImages () method is not recursive; the second is recursive and fires after the navigation bar slides into the window.

Finally, here is the relevant 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> ...
+4
source share
2 answers

IE must load events specific to images before attempting to set this src element. All other browsers will do just fine with this. IE suffocate.

Your download function in the example above will probably never work for this reason.

Try:

  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);
+9
source

I did something very similar with a recursive JavaScript function for loading images, which works fine in IE.

The main differences that I see are as follows:

  • I used the regular JavaScript function, not the jQuery function.
  • I created each image using jQuery and added it to the appropriate container.

I'm not sure if any of these questions matter, but just by looking at your code, I assume that some more expensive features will refer to the parents of the images twice, and also fade the image.

Is this successful if they are commented out?

+1
source

More articles:


All Articles