jQuery .attr() crashing Internet Explorer

Question

Hello everyone,

This is my first time posting a question here, as I usually try to find solutions myself. This one, though, being an IE issue, just drives me crazy.

I use jQuery cycle plug-in on a website I made and, to populate a caption div, I use a little function that is called after the image is loaded, which uses the "alt" attribute of the image. This seems to exasperate Internet Explorer, which, doesn't have the time to fulfill this apparently so-complicated task, and, as the slideshow cycles, it enters in an infinite loop and eventually crashes – the newer the version, the worse the crash: the older IEs just display an error message saying “The webpage cannot be displayed”, while the newer (7 and 8) completely crash the system.

I have no idea on how to solve or work around this. Here is the problematic code.

function changeCaption() {
    var caption = $("img", this).attr("alt");
    $('#caption').fadeIn("slow").html(caption);
}

Thanks in advance for any pointer: I am amazed as how something so simple and globally recognized (didn't encounter any other browser who had problem with this), can cause a problem so big. I also read somewhere that being able to crash a browser remotely is a serious issue :)

Lucio

Answer 1

Im not familiar with the cycle plug in but it would seem that you could try this

function changeCaption() {
    $('#caption').fadeIn("slow").html(this.getElementsByTagName('img')[0].alt);
}

it should work assuming that there is only one img contained in this

Answer 2

I suspect that the $("img", this) is failing. The 'img' selector not a problem. However the 'this' context may not be well defined. The purpose of the context is to narrow down the search space to provide better jQuery performance. The context parameter must be a DOM element, document or a jQuery element. I suggest something like the following:

<div id="slideShow">

    <!-- put your slide show here -->

</div>

Then use a the following to select the image:

var slideShow = $("#slideShow");
var caption = $("img", slideShow);

If this does not work, try putting some alerts (or use the firebug console) in the code. For instance, right after the caption statement put in an alert(caption). This will help you to determine where this is failing.