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.

score 2 · Accepted Answer · answered Oct 14 '11 at 20:12

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

I think [jcarousel](http://sorgalla.com/jcarousel/) might be a good choice if the OP goes with the new plugin route. I've done almost the same rotator with it a few times. — fncomp, Oct 17 '11 at 02:03

Paul Stanley · Answer 2 · 2011-10-10T12:30:45.303

1

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?

edited Oct 10 '11 at 12:30

answered Oct 10 '11 at 12:13

Paul Stanley

4,018
6
35
56

Thanks @octopi, but this doesnt seem to work :( take a look for yourself. Thanks again – rickyduck Oct 10 '11 at 12:30
Yeah I'm scoping it as we speak, I'll have a deeper look. – Paul Stanley Oct 10 '11 at 12:49

score 1 · Answer 3 · answered Oct 12 '11 at 17:53

1

Checked the website on IE8 and seems to be working fine with animation bit, only things i the Images looks stretched vertically.

answered Oct 12 '11 at 17:53

DP.

51
5

thanks.. it's worked a few times for me, but then refreshing the page instigates the problem. – rickyduck Oct 13 '11 at 13:04
Yes, i also faced the same issue, when navigating to the home page, the images don't load at all. the issue is specific to IE8, not on Chrome or IE6 – DP. Oct 14 '11 at 06:14
Strange that IE6 would work. Also note that this problem has occured in IE9 but not IE10pp, thanks for getting back to me @DP – rickyduck Oct 14 '11 at 09:21

score 1 · Answer 4 · answered Dec 15 '11 at 05:55

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

score 0 · Answer 5 · answered Mar 18 '14 at 22:32

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.

Javascript "imageflow" IE not loading, slow in other browsers

5 Answers5