Try this:
el.find("#pic")
.attr({"src": pix[imgName].imgSrc, "name": imgName})
.bind('load readystatechange', function(e){
if (this.complete || (this.readyState == 'complete' && e.type =
'readystatechange')) {
el.fadeIn("slow");
$("#loading").hide();
};
});
The onload event for images is a cross-browser mess.
- ricardo
On Mar 14, 7:27 pm, Jon Crump <jjcr...@myuw.net> wrote:
> Dear all,
>
> OK, solved it myself in case anyone's still listening. It still remains a
> puzzle why safari on Mac interprets the code differently.
>
> The if/else test below isn't necessary. The fadeOut was executing, but the
> .load() callback failed when the .thumb clicked was the same one as the
> previous click. Both FF and IE didn't blink when the src of #pic remained
> the same, but safari wouldn't execute the .load callback because nothing
> loaded: the src of #pic remained the same.
>
> The solution for my purposes was to set the src of #pic to null and then
> re-set it to pix[imgName].imgSrc whatever it might be, then .load() sees
> that something has loaded and executes the callback.
>
> Is this a known discrepancy between how FF, IE, and Safari interpret
> .load(), or something completely screwy and idiosyncratic to my klugy
> code? (jQuery 1.2.6, by the way, in safari 3.1.2)
>
> Jon
>
> On Fri, 13 Mar 2009, Jon Crump wrote:
>
> > Dear all,
>
> > I'm not sure if this is a jQuery question or not, but I got the following
> > code to work in FF, but it fails in Safari:
>
> > $(".thumb").click(function() {
> > var imgName = $(this).attr("alt");
> > var el = $("#dropdown");
> > if (el.is(":visible") && $("#pic").attr("name") == imgName) return;
> > else {
> > el.fadeOut("slow", function() {
> > $("#loading").show();
>
> > el.find("#textContent")
> > .text(pix[imgName].aText);
>
> > el.find("#pic")
> > .attr({"src": pix[imgName].imgSrc, "name": imgName})
> > .load(function(){
> > el.fadeIn("slow");
> > $("#loading").hide();
> > });
> > });
> > }
> > });
>
> > The if/else test was necessitated by the fact that if the user clicked on
> > the
> > same thumbnail image twice, the #dropdown element faded out and didn't fade
> > back in.
>
> > In FF clicking on the same image twice makes no change, but in Safari,
> > clicking on the same image twice makes no change IF #dropdown is visible, if
> > #dropdown is NOT visible and the user clicks on the same thumbnail that was
> > last clicked on, the loading gif displays but the #dropdown does not.
>
> > I'm sure this is just my own javascript inexperience, but can anyone suggest
> > where I'm going wrong?
>
> > Thanks,
> > Jon
