Chrome和JQuery問題 - $（document）.ready（function（）{}）;在頁面加載之前調用

我正在學習JQuery，並且遇到了一個奇怪的問題。我做了一個幻燈片演示，它可以在IE，Firefox 3.0和Firefox 3.5上運行，但最初的圖像在Chrome中不起作用。

該腳本只是循環顯示圖像列表，並根據查看窗口的大小調整div（圖像，標題）的大小。如果我移動$（document）.ready（function（）{}）;腳本到身體的盡頭，腳本工作正常。

我的印象是$（document）.ready函數在文檔完全加載之前不會被調用。這是否正確，並且Chrome渲染引擎正在做些奇怪的事情，或者我做錯了什麼？

這裏是代碼：

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="" rel="<h3>Bees!</h3> Some bees in my lavender." /></a> 
     <a href="#"> 
      <img src="images/bee1_edited.jpg" alt="Bee One" title="" rel="<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); 

}

來源

2009-08-31 JamesL

爲了詳細說明ceejayoz的回答是：$（文件）則返回包裝成一個jQuery對象的DOM - jQuery選擇返回某些部分的DOM，包裝爲一個jQuery對象。正如您現在可能已經瞭解的那樣，DOM並不是頁面內容的同義詞。 – 2009-08-31 20:09:24

"ready" means the DOM, not the content of the pages.這意味着頁面的HTML結構是存在的，但圖像，I幀，等可能不一定已經加載。如果您需要加載所有內容，則需要使用load事件而不是ready事件。

來源

2009-08-31 19:56:21 ceejayoz

值得注意的是，$(document).ready可能會在所有圖像加載之前觸發。由於您的<img>標籤沒有設置任何尺寸，因此在您的腳本可以準確檢測其尺寸之前，需要加載圖像。

$(document).ready在頁面中的位置應該不會影響它的觸發時間，但是您可能會看到基於緩衝區的無關競爭條件。嘗試將其移回頂端並加載頁面幾次，以查看現在是否可行。

如果它仍然失敗零星的，那麼你應該考慮使用window.load事件，而不是$(document).ready

來源

2009-08-31 19:57:01

Chrome和JQuery問題 - $（document）.ready（function（）{}）;在頁面加載之前調用

回答

相關問題