Chrome et JQuery question - $(document).ready(function() { }); le fait d'être appelée avant que la page est chargée

Je suis en train d'apprendre JQuery, et j'ai couru dans une drôle de question. J'ai fait un diaporama, et il fonctionne sous IE, Firefox 3.0 et Firefox 3.5, mais l'image ne fonctionne pas sous Chrome.

Le script juste cycles au travers d'une liste d'images et redimensionne les divs (image, légende) en fonction de la taille de la fenêtre de visualisation. Si je déplace le $(document).ready(function() { }); script à la fin du corps, le script fonctionne OK.

J'étais sous l'impression que le $(document).prêt de la fonction ne serait pas appelé jusqu'à ce que le document avait totalement chargé. Est-ce correct, et le moteur de rendu de Chrome est en train de faire quelque chose de bizarre, ou je fais quelque chose de mal?

voici le code:

slideShow.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="Stylesheet" type="text/css" href="css/main.css" />

<script src="scripts/jquery-1.3.2.js" type="text/javascript"></script>

<script src="scripts/jquery.slideShow.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function() {
        slideShow();
    });
</script>  

</head>
<body>
    <div id="gallery">
        <a href="#" class="show">
            <img src="images/bees1_edited.jpg" alt="Bees" title="" tag"><h3>Bees!</h3> Some bees in my lavender." /></a>
        <a href="#">
            <img src="images/bee1_edited.jpg" alt="Bee One" title="" tag"><h3>Bee</h3> Close-up of a bee on a lavender flower." />
        </a>
.
.
.
    <div class="caption">
        <div class="content">
        </div>
    </div>
</div>
<div class="clear">
</div>  

</body>
</html>

jquery.slideShow.js

function slideShow() {
//Set the opacity of all images to 0  
$('#gallery a').css({ opacity: 0.0 });
//Get the first image and display it (set it to full opacity)  
$('#gallery a:first').css({ opacity: 1.0 });
//Set the caption background to semi-transparent  
$('#gallery .caption').css({ opacity: 0.7 });
//Resize the width of the caption according to the image width
$('#gallery a:first').find('img').css({ height: $('#gallery a:first').find('img').height() });
$('#gallery a:first').find('img').css({ width: $('#gallery a:first').find('img').width() });
var captionPosition = parseInt($('#gallery a:first').find('img').css('height')) * -1;
if ($(window).height() < $('#gallery a:first').find('img').height()) {
var imageWidth = parseInt($('#gallery a:first').find('img').width());
var imageHeight = parseInt($('#gallery a:first').find('img').height());
$('#gallery a:first').find('img').css({ height: $(window).height() - 10 });
var cssHeight = parseInt($('#gallery a:first').find('img').css('height'));
$('#gallery a:first').find('img').css({ width: parseInt((cssHeight * imageWidth) / cssHeight) });
captionPosition = parseInt($('#gallery a:first').find('img').css('height') * -1);
}
if ($(window).width() < $('#gallery a:first').find('img').width()) {
var imageWidth = parseInt($('#gallery a:first').find('img').width());
var imageHeight = parseInt($('#gallery a:first').find('img').height());
$('#gallery a:first').find('img').css({ width: ($(window).width() - 50) });
var cssWidth = parseInt($('#gallery a:first').find('img').css('width'));
$('#gallery a:first').find('img').css({ height: parseInt((cssWidth * imageHeight) / imageWidth) });
captionPosition = parseInt($('#gallery a:first').find('img').css('height')) * -1;
}
$('#gallery .caption').css({ width: $('#gallery a:first').find('img').css('width') });
$('#gallery .caption').css({ bottom: captionPosition });
//Get the caption of the first image from REL attribute and display it  
$('#gallery .content').html($('#gallery a:first').find('img').attr('rel')).animate({ opacity: 0.7 }, 400);
//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds  
setInterval('gallery()', 6000);
}
function gallery() {
//if no IMGs have the show class, grab the first image  
var current = ($('#gallery a.show') ? $('#gallery a.show') : $('#gallery a:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image  
var next = ((current.next().length) ? ((current.next().hasClass('caption')) ? $('#gallery a:first') : current.next()) : $('#gallery a:first'));
//Get next image caption  
var caption = next.find('img').attr('rel');
//Set the fade in effect for the next image, show class has higher z-index  
next.css({ opacity: 0.0 }).addClass('show').animate({ opacity: 1.0 }, 1000);
//Hide the current image
current.animate({ opacity: 0.0 }, 1000).removeClass('show');
next.find('img').css({ height: next.find('img').height() });
next.find('img').css({ width: next.find('img').width() });
var captionPosition = parseInt(next.find('img').css('height')) * -1;
if (next.find('img').height() > $(window).height()) {
var imageHeight = parseInt(next.find('img').height());
var imageWidth = parseInt(next.find('img').width());
next.find('img').css({ height: (parseInt($(window).height()) - 50) });
var cssHeight = parseInt(next.find('img').css('height'));
var testVal = parseInt((cssHeight * imageWidth) / imageHeight);
next.find('img').css({ width: testVal });
//alert('css width=' + next.find('img').css('width') + ', css height=' + cssHeight + ', img width = ' + imageWidth + ', img height = ' + imageHeight + ', window width = ' + $(window).width() + ', window height = ' + $(window).height());
captionPosition = parseInt(cssHeight * -1);
}
if (parseInt(next.find('img').css('width')) > parseInt($(window).width())) {
var imageHeight = parseInt(next.find('img').height());
var imageWidth = parseInt(next.find('img').width());
next.find('img').css({ width: (parseInt($(window).width()) - 50) });
var cssWidth = parseInt(next.find('img').css('width'));
var testVal = parseInt((cssWidth * imageHeight) / imageWidth);
next.find('img').css({ height: testVal });
//alert('imageWidth = ' + imageWidth + 'imageHeight = ' + imageHeight + 'css height = ' + next.find('img').css('height') + ', css width = ' + next.find('img').css('width'));
captionPosition = parseInt(next.find('img').css('height')) * -1;
}
$('#gallery .caption').css({ width: next.find('img').css('width') });
$('#gallery .caption').css({ bottom: captionPosition });
//Set the opacity to 0 and height to 1px  
$('#gallery .caption').animate({ opacity: 0.0 }, { queue: false, duration: 0 }).animate({ height: '1px' }, { queue: true, duration: 300 });
//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect  
$('#gallery .caption').animate({ opacity: 0.7 }, 100).animate({ height: '100px' }, 500);
//Display the content  
$('#gallery .content').html(caption);
}
  • Pour des précisions sur ceejayoz réponse: $(document) retourne le DOM enveloppé comme un objet jQuery - jQuery sélecteurs de retour d'une partie de la DOM, enveloppé comme un objet jQuery. Comme vous le comprenez sans doute maintenant, le DOM n'est pas synonyme avec le contenu des pages.
InformationsquelleAutor JamesL | 2009-08-31
  1. 17

    "prêt" signifie que le DOM, pas le contenu des pages. Cela signifie que la page HTML de la structure est là, mais les images, les iframes, etc. peut ne pas nécessairement avoir été chargé. Vous aurez besoin de la load de l'événement au lieu de le ready cas si vous avez besoin de tout chargé.

    InformationsquelleAutor ceejayoz
  2. 3

    Il est intéressant de noter que $(document).ready feu avant que toutes les images ont chargé. Depuis votre <img> les balises n'ont pas de dimensions, les images doivent se charger avant de votre script peut détecter avec précision leurs dimensions.

    Le positionnement de $(document).ready dans votre page ne devrait pas affecter lorsqu'il se déclenche, mais vous pourriez voir une autre condition de course basé sur un apprêt cache. Essayez de le déplacer vers le haut et charger la page plusieurs fois pour voir si cela fonctionne maintenant.

    Si c'est toujours pas de façon sporadique, alors vous devez envisager d'utiliser le window.load événement au lieu de $(document).ready

    InformationsquelleAutor James Wheare