JQuery fadeIn after src change, but fadeIn on previous src anyway!
I have a jquery error and I was looking for a watch now, I cannot figure out what is wrong ... I have this code:
$(document).ready(function(){
$('#ulPhotos a').click(function() {
var newSrc= $(this).find('img').attr('src').split("/");
bigPictureName = 'big'+newSrc[2];
$('#pho').hide();
$('#imageBig').attr("src", "images/photos/"+bigPictureName);
$('#pho').fadeIn('slow');
var alt = $(this).find('img').attr('alt');
$('#legend').html(alt);
});
});
and this is in html:
<ul id="ulPhotos">
<li><a href="#centre"><img src="images/photos/09.jpg" title="La Reine de la Nuit au Comedia" alt="<em>La Reine de la Nuit</em> au Comedia"/></a>
<a href="#centre"><img src="images/photos/03.jpg" title="Manuelita, La Périchole à l’Opéra Comique" alt="Manuelita, <em>La Périchole</em> à l’Opéra Comique" /></a></li>
<li><a href="#centre" ><img src="images/photos/12.png" title="" alt="Marion Baglan Carnac Ré" /></a>
and for bigImage:
</div>
<div id="pho" a name="centre">
<p id="legend"> La Reine de la Nuit</p>
<img src="images/photos/big09.jpg" alt="Marion Baglan" id="imageBig"/>
</div>
It just changes the origin of my img to a div named pho ... but sometimes when the new image is too heavy, fadeIn is executed on the previous src !! so we see fadeIn first in the previous image, and then, the right image appears without fadeIn ....
Am I missing something?
ps: the page is here http://www.marion-baglan.net/photos.htm#centre if you click quickly you can see it ... and when I try to put some big photos it is very obvious ...
a source to share
You need to use an event load
, as karim suggests, but in a slightly different way to work in all cases, for example:
$('#imageBig').one('load', function() {
$('#pho').fadeIn('slow');
}).attr("src", "images/photos/"+bigPictureName).each(function() {
if(this.complete) $(this).load();
});
You need to attach the handler load
using .one()
for two reasons, so we don't add .load()
and every time you change the image it enqueues another fadeIn
, and also so the next cache component doesn't call twice at once. It is very important to set up a handler load
before changing the image source , as the cached image will be loaded immediately, possibly before the handler is attached.
The last part, .each()
calls for loops through the images to see if it is complete
, if this case has already been loaded from the cache, and not all browsers fire an event load
for this ... so we manually trigger it. .one()
calling from earlier prevents it from doing anything twice.
a source to share
fadeIn
seems to be done in the previous source because it was actually calling the div wrapping the image. When you disappear into the div, the previous image is still displayed inside it and will remain visible until the new image starts loading. Try fading in the div once you're sure the image has finished loading:
$('#imageBig').attr("src", "images/photos/"+bigPictureName).load(function() {
$('#pho').fadeIn('slow');
});
See the load event and notice the .complete
image property .
a source to share
Thank you so much for you, it works great! Your answer Nick for newbies is a bit complicated, but I realized that it is interesting to be interesting to load the load for optimization and load manually in one go, if some browsers will not raise the load event when it comes from the cache. Browser cache is what I'll be looking at in the future; so everything is fine now, just changed:
if(this.complete)...
to
if($(this).complete) ...
because this one was unknown .. it's nothing anyway thanks! so much to learn ...
a source to share