Javascript “imageflow” IE not loading, slow in other browsers

Question

I'm using a javascript script called ImageFlow . It runs fine in FF/Chrome, however is very slow and hangy.

In IE (9,8,7) it just refuses to load at all. There are no JS problems, and I can't post the code as there is too much and I also didnt code any of the site so dont know what triggered it to go wrong.

The demo site is http://crofts.propertylogic.net and the JS for the imageflow can be found at http://crofts.propertylogic.net/coverflow/imageflow.js . The effect is meant to slot into the white box in the middle of the page, with the team members, as you can see on chrome/ff. If anyone could point me in the right direction that would be great.

Answer 1

I can't fix the code for you, but I can tell you basically why it isn't working in IE9. The init event that finds the 'myImageFlow' div is happening before that div has been read into the DOM. I believe it's because of the way the ImageFlow plugin imitates the DOMContentLoaded event for IE. The ImageFlow plugin uses the DOMContentLoaded plugin which hasn't been updated since May '08. I would bet you that library is out of date and as a result it is breaking ImageFlow, which also looks to be quite out of date.

I would honestly suggest that you look for a more modern plugin. If that doesn't help, try messing around with the DOMContentLoaded section to see if you can figure out why it is not delaying long enough in IE9 (use the debugger F12).

Answer 2

If you didn't code any of the site, chances are you didn't install imageflow at the site either. But installation has been covered, right? Or maybe not!

http://finnrudolph.de/ImageFlow/Installation

<div id="unique_name" class="imageflow"> 
    <img src="dir/image_1.jpg" longdesc="URL_1" width="w_1" height="h_1" alt="Text_1" />
</div>

The image width and height parameters (w_x and h_x) must be set in the XHTML for full compatibility with the Internet Explorer. Sorry for this extra load of work - every browser but Microsofts Internet Explorer can fetch the right image dimensions via the JavaScript!

That means would you have to insert the image dimensions into the xhtml at server side for ie I think. Is that currently being done?

Answer 3

在IE8上检查了网站，并且似乎可以很好地使用动画位，只有“图像”垂直拉伸的情况。

Answer 4

you can fix this using jQuery - all are correct the dom handler is the issue.

$(document).ready() is the key

$(document).ready(function()
{
    var circular_3 = new ImageFlow();
    circular_3.init({ ImageFlowID: 'imageflow1',
        //circular: true,
        reflections: false,
        reflectionP: 0.4,
        slider: false,
        captions: false,
        opacity: true,
        xStep: 250,
        imageFocusM: 1.5,
        startID: 2
    });

Answer 5

I know this is a little late to answer this question. InvisibleBacon is correct in that the domReady code hasn't been modified since 2008, but I checked the domReady code and it does work for IE 5 through 11, Firefox, Chrome, Mobil Chrome, Safari, and Mobile Safari. I did not check the code with Opera.

In this case I would say the problem is with the imageflow.js code you were using, which I see you no longer use.