Chrome ve JQuery sorunu - $ (document) .ready (function() {}); sayfadan önce çağrılıyor

yüklüyor JQuery'yi öğreniyorum ve tuhaf bir konuyla karşılaştım. Bir slayt gösterisi yaptım ve IE, Firefox 3.0 ve Firefox 3.5'da çalışıyor, ancak ilk görüntü Chrome'da çalışmıyor.

Komut, görüntülerin bir listesi içinde gezinir ve görüntüleme penceresinin boyutuna göre div'leri (resim, resim yazısı) yeniden boyutlandırır. $ (Document) .ready (function() {}) öğesini taşırsam; Vücudun sonuna komut dosyası, komut tamam çalışıyor.

Belgenin tamamen yüklenene kadar $ (document) .ready işlevinin çağrılmayacağı izlenimindeyim. Doğru mu? Chrome render motoru da garip bir şey yapıyor mu, yoksa yanlış bir şey mi yapıyorum? ,

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); 

}

kaynak

2009-08-31 JamesL

ait window.load olayı kullanmayı düşünmelisiniz: - jQuery seçiciler kısmını iade $ (belge) bir jQuery nesnesi olarak sarılmış DOM döndürür DOM, jQuery nesnesi olarak sarılmış. Muhtemelen anladığınız gibi, DOM sayfaların içeriğiyle eşanlamlı değildir. –

"ready" means the DOM, not the content of the pages. Bu sayfanın HTML yapısı olmadığı anlamına gelir, ancak resimler, iframe'lerin: Burada

kodudur vb. mutlaka yüklenmemiş olabilir. Yüklenen her şeye ihtiyacınız olursa, ready olayı yerine load etkinliğine ihtiyacınız olacaktır.

kaynak

2009-08-31 19:56:21 ceejayoz

Tüm görüntüler yüklenmeden önce $(document).ready'un yangına neden olabileceğini unutmayın. <img> etiketlerinizde herhangi bir boyut ayarlanmadığından, komut dosyanız boyutlarını doğru bir şekilde algılayabilmeniz için resimlerin yüklenmesi gerekir.

Sayfanızdaki $(document).ready konumlandırması tetiklendiğinde etkilenmemelidir, ancak astarlanmış bir önbelleği temel alan ilişkisiz bir yarış durumu görüyor olabilirsiniz. Şimdi çalışıp çalışmadığını görmek için sayfayı en üste geri taşımaya ve sayfayı birkaç kez yüklemeye çalışın.

hala düzensiz başarısız oluyor, o zaman ceejayoz cevabı ayrıntılı için yerine $(document).ready

kaynak

2009-08-31 19:57:01

Chrome ve JQuery sorunu - $ (document) .ready (function() {}); sayfadan önce çağrılıyor

cevap

İlgili konular