ContentFlow javascript plugin NOT loading in IE but loads in all non-IE browsers

I've been tinkering with the ContentFlow JavaScript library found here which is a very slick replica of Apple's album cover flow in iTunes. I'm loading 40+ images for my wife's maternity jeans site. I've added a few improvements to the Slideshow addOn, including a counter (1 of 42) and a logo for the supplier of the jeans.

It's brilliant, until you look at it in IE. In fact, it's loading faster than the Facebook Like button for all non-IE browsers, but it never loads for IE. All you see is the 'loading' image. It never loads in IE7. It loads 25% of the time in IE8.

If I add an alert in the _init function to alert(cf._imagesToLoad) just before the line:

if (cf._imagesToLoad == 0 || new Date() - now > cf._loadingTimeout) {

then IE hangs on a certain number (less than 20 and usually less than 10), which leads me to think that IE is not loading 42 images as quickly as other browsers.

How do I increase the time taken to load images, a开发者_Go百科s it's not taking anywhere close to the loadingTimeout default of 30 seconds?

Why does it take longer to load images in IE7 & IE8? It works like a charm in FF, Safari & Chrome.

The weird thing is that if a flush IE's cache, it works fine the first time (most of the time). Maybe an IE caching issue?

Does anyone know a good way to troubleshoot this particular library in IE?

I pulled my hair out until I remembered JQUERY! I got the same affect working by replacing the logic where the 'foobar' function is being called via an attachEvent handler for the onload event for the CONTENT element.
(This section has been reworked by many people due to the different ways that different browsers handle event handlers...)

See the following discussion: http://code.google.com/p/contentflow/issues/detail?id=3 And replace jbdemonte's fix with the following code:

$(this.content).ready(function(){foobar()});

i had a similar problem with ContentFlow in IE. I added some custom ajax-paging and wanted to initialize the ContentFlow manually. I recognised, that every time my init wouldn't work, the ContentFlow was initialized by the library. I made this part in the method ContentFlowGlobal.onloadInit():

    /* init the rest */
    var divs = document.getElementsByTagName('div');
    DIVS: for (var i = 0; i < divs.length; i++) {
        if (divs[i].className.match(/\bContentFlow\b/)) {
            for (var j=0; j<ContentFlowGlobal.Flows.length; j++) {
                if (divs[i] == ContentFlowGlobal.Flows[j].Container) continue DIVS;
            }
            var CF = new ContentFlow(divs[i],{}, false);
            CF.init();
        }
    }    

dependent on a boolean, which i set myself.

Until I discovered that part, my initialization was consisting simply of:

var flow = new ContentFlow(id, opions);

After that, I added:

flow.init();

That fixed it for me. I hope that helps you out, too.

Daniel

From what I can tell - there are a couple of IE-specific issues.

In the file contentflow.js, there is an addReflection: function().

There is some conditional logic that is qualified by the line, if (this.Browser.IE). Evidently, the IE implementation chokes on the IMAGE REFLECTIONS.

My solution was to simply comment out the code which would create the reflection for IE - to do so would be to comment out everything thru the else related to that first if (this.Browser.IE) and add if (!this.Browser.IE) right after the else.

There is also a problem with IE not waiting until all the images have been downloaded before it decides to display the ContentFlow object. In the section var ContentFlowItem = function (CFobj, element, index) { replace if (this.Browser.IE && !this.content.onload) with if (!this.content.onload).

The net result is that you lose reflections below the image in IE, but all the images load and the updates are much smoother.

Other tweaks can include changing the color of two of the image files in the Contentflow img folder (slider_white.png and scrollbar_white.png) to help them show up better on white backgrounds.

It may be easier to check this if working with contentflow_src.js versus the minimized JS file, `contenflow.js.