IE8 Stack overflow at Line:0

javascript slide show

[bsim]

Using JQuery Banner Rotator Slide Show [codecanyon.net ]

I have 20 slides in one slide show. Using IE8.
[184.173.230.60 ], click the thumbnail "Interior Home Designs" and back again - eventually you'll get this error:
Using IE8 “Stack Overflow at line: 0”. Sometimes this does not happen when I first click on the slide show, but after I click on 2 others and back to the one with 20 images - I get this error. I am wondering if there is something in IE8 NOT fixable.

No problem with FF, chrome, safari. “Solutions” I’ve tried: turning on/off IE script debugging options, updating Adobe Flash. Next I read about “recurse” limitations.

If I lower the slides to 14 I am not seeing this. The script notes read: "use unlimited number of slides".

I tested in Firefox - the only issue: "Use of getAttributeNodeNS() deprecated, use getAttributeNS() instead", but this parameter isn't in the js, only "getAttributeNode", which I tried altering - no change.

My client wants 20 images in each of 5 slide shows. I am ready to try another slide show, but concerned the number of images may too much for a slide show.

I would appreciate any ideas and thoughts, or suggestions for a Javascript slide show. Thank you.

[tedster]

Sorry your question has gone without discussion for so long. Relative to the technical issues, I don't have a lot of help to offer - as you know, the number of slides is not "supposed to" be a problem, but... Especially with IE8, we are talking about older technology.

With regard to how many slides are effective in a slide show, I'd say 20 is WAY too many for any serious marketing purposes. Backing the number down could be very important, not just for technical reasons but for marketing effectiveness.

[Robert Charlton]

I am wondering if there is something in IE8 NOT fixable.

bsim - I came across this thread via search because, while surfing the web, I was observing a stack overflow problem in IE8 which was not showing up in FF 11.0. Doing some searching online, I see that IE7 was also subject to similar problems.

Various suggestions I've seen to fix it include reinstalling Adobe Flash and Shockwave, or reinstalling all Adobe products, which you obviously can't expect your site visitors to do... or, at the programming end, avoiding various javascript combinations which appear to trigger the problem. Again, though, I can't be of much technical help... but it does seem to be IE-related, and various combinations of javascript, including apparently Google Analytics, will trigger it.

The best discussion on the topic I found is here... [stackoverflow.com...]

I'm hoping, if you solve the problem, that you can report back what you find.

[Fotiman]

Part of the problem is recreating this issue may be a challenge. I tried looking at your example, but was unable to recreate the problem with IE8. I assumed this could be differences in environment, and just didn't have time to follow up. My suggestion would be to set IE's debugging options and catch the error then run it through a debugger to see what the stack trace looks like when it occurs (that's what I was going to do, but wasn't able to reproduce it).

[bsim]

Hello - @Robert - Thanks for the link - looks familiar, but will review.
So far the solution is to only use 16 images. Although the creator states "unlimited images" even their demo tops out at 24 images. But only on IE8.

@Fotiman I have removed the link I had - changing to another slide show. Thanks SO much for your time, it's always disappointing to have to tell a clientwe can't use something they like.

Appreciate help when trouble shooting!

[bsim]

@tedster Yes, I think it's that simple -asking too much of IE8

[Robert Charlton]

That JQuery Banner Rotator is one very fancy slide show. I can see why the client liked it.

<off topic for javascript>
Normally, I don't like elaborate transitions, but the rotator was so customizable that I can see where you might have produced something very effective with it. With what you're using on your development site now, you might want to see if you can shorten the dissolve time. I think with the type of images you're using, quicker dissolves would be much cleaner.
</off topic>

[bsim]

Have tried all the suggestions and the stackoverflow page. Just uploaded new pages with more images in the slide shows. Here is what is happening which may lead someone to a past issue:
If I click this page:
[184.173.230.60...]
(with 22 images) it may not happen the first time - in fact it took me navigating from 5 pages before it began triggering the stack overflow error - had hope, for a moment..next click: [184.173.230.60...]
then
[184.173.230.60...]
If I can't get this to work consistently - can't use it. The creator doesn't respond. Thanks, again.

[Fotiman]

I can't tell for certain, but I *think* the error is happening in your google analytics code (ga.js), and might possibly be a conflict with your <body onload="MM_preloadImages(...)"> code and a document.onload call that's happening within your analytics. Note, it's best not to use inline event handlers, so I would suggest you try removing the onload attribute from your body tag and see if that fixes the problem. If it does, then you can use an event listener to preload the images instead. If not, then the problem is elsewhere.

[bsim]

I removed "body onload", no change, removed Google analytics, no change, removed both and no change. Event Listener is new to me - will investigate. Thank you!

[Fotiman]

I don't know if this is related to the problem, but it appears that loader.gif is returning a 404 NOT FOUND.

[Fotiman]

I took another look, this time looking at the Profiler in the IE Developer Toolbar. It appears to me that this bit of code in jquery.wt-rotator.min.js is running the most (note, I ran this bit of code through [jsbeautifier.org...] to make it readable):

C.prototype.loadImg = function (H) {
    try {
      var G = this._$items[H];
      var J = f("<img class='main-img'/>");
      var K = this;
      J.load(function () {
        if (!G.data("img")) {
          K.storeImg(G, f(this))
        }
        H++;
        if (H < K._numItems) {
          K.loadImg(H)
        }
      }).error(function () {
        H++;
        if (H < K._numItems) {
          K.loadImg(H)
        }
      });
      J.attr("src", G.data("imgurl"))
    } catch (I) {}
  };

Note that loadImg is called from within loadImg, thereby building up the stack. I don't know if this will work, but you might be able to change this code to make it asynchronous using setTimeout:

C.prototype.loadImg = function (H) {
    try {
      var G = this._$items[H];
      var J = f("<img class='main-img'/>");
      var K = this;
      J.load(function () {
        if (!G.data("img")) {
          K.storeImg(G, f(this))
        }
        H++;
        if (H < K._numItems) {
          K.loadImg(H)
        }
      }).error(function () {
        H++;
        if (H < K._numItems) {
          (function(Href, Kref) {
            setTimeout(function (){Kref.loadImg(Href)}, 20);
          })(H, K);
        }
      });
      J.attr("src", G.data("imgurl"))
    } catch (I) {}
  };

That way, instead of a call stack like this:

loadImg 
  loadImg 
    loadImg 
      loadImg 
        ... 

You would end up with a call stack more like this:

loadImg 
loadImg 
loadImg 
loadImg 
... 

Not sure if that will work, but might be worth giving a try.