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

のwindow.loadイベントの使用を検討してください：$（ドキュメント）jQueryオブジェクトとしてラップDOM返す - jQueryのセレクタは、いくつかの部分を返しますDOMの、jQueryオブジェクトとしてラップされています。あなたが今理解しているように、DOMはページの内容と同義ではありません。 –

"ready" means the DOM, not the content of the pages.これは、ページのHTML構造があることを意味しますが、画像、アイフレーム、必ずしもロードされていない可能性があります。すべてのイベントが必要な場合は、readyイベントの代わりにloadイベントが必要です。

出典

2009-08-31 19:56:21 ceejayoz

すべての画像がロードされる前に$(document).readyが起動する可能性があります。 <img>タグには寸法が設定されていないため、スクリプトで寸法を正確に検出するには画像を読み込む必要があります。

ページ内の$(document).readyの位置付けは影響を与えませんが、プライム付きキャッシュに基づいて関連のない競合状態が発生している可能性があります。それを上部に戻して、ページが何回か読み込まれて、今すぐ動作するかどうか確認してください。それはまだ散発的に失敗だ場合

、あなたはceejayozの答えに詳述すると代わりに$(document).ready

出典

2009-08-31 19:57:01

ChromeとJQueryの問題 - $（document）.ready（function（）{}）;ページがロードされる前に呼び出されています

答えて

関連する問題