jQuery的.load（）：回調幻燈片功能不會加載所有圖像正確首先加載，但隨後負載上第二.load（）

我有了這個功能，jQuery的.load（）：回調幻燈片功能不會加載所有圖像正確首先加載，但隨後負載上第二.load（）

showcase_loader()

加載HTML成一個帶有.load（）的包裝，然後啓動一個名爲.nivoslider（）的插件函數，該函數將圖像列表格式化爲幻燈片，具體取決於列表中所有圖像的尺寸（必須等待所有圖像加載要做到這一點）。

第一次點擊.load（）（點擊.projects a）時，似乎圖像沒有足夠的時間加載，因此該插件無法發揮它的魔力。我試圖把幻燈片功能爲：

.load(var, callback function)

，以確保所有的圖像加載，但它似乎只是工作，我第二次嘗試（當圖像被緩存起來，我想象）。我這樣說，因爲它不會搞砸我的本地副本，只有在線的副本。

你可以嘗試住在這裏（raphaelguilleminot.com日誌：furax75通：kjhdjj我還沒有調試CSS的IE YET）

我已經堅持了一段時間...有什麼想法？

JQUERY：

// showcase loader 
var showcase_loader = function() { 
//prepare loader 
$('html, body').animate({scrollTop:0}, 'slow'); 
var toLoad = $(this).attr('href')+' #showcase'; 
    //check if there is already something loaded in wrapper 
    if ($('#project_showcase_wrapper').is(':hidden')) { 
     //mark link as selected 
     $(this).addClass('opacity'); 
     //load showcase content 
     $('#project_showcase_wrapper').load(toLoad, function() { 
     $('#project_showcase_wrapper').slideDown('normal', function() { 

      $('#slider').nivoSlider({effect:'fade'}); 
      $('#showcase').fadeIn('normal'); 
      $('.showcase_badge').fadeIn(2000); 
      $('#showcase_next, #showcase_previous').click(showcase_loader); 
     }); 
     });   
}else{ 

$('.opacity').removeClass('opacity'); 
$(this).addClass('opacity'); 
$('#showcase').fadeOut('normal', function() { 
$('#project_showcase_wrapper').load(toLoad, function() { 
    $('#slider').nivoSlider(); 
    $("#showcase").hide(); 
    $('#showcase').fadeIn('normal'); 
    $('.showcase_badge').fadeIn(2000); 
    $('#showcase_next, #showcase_previous').click(showcase_loader); 
    }); 
}); 
} 
return false; 
}

加載的HTML：

<div id="showcase"> 
<div class="showcase_text"> 
</div> 
<ul id="slider"> 
    <img src="images/project1_slide1.jpg" alt="" title="" /> 
    <img src="images/project1_slide2.jpg" alt="" title="" /> 
    <img src="images/project1_slide3.jpg" alt="" title="" /> 
    <img src="images/project1_slide4.jpg" alt="" title="" /> 
    <img src="images/project1_slide5.jpg" alt="" title="" /> 
    <img src="images/project1_slide6.jpg" alt="" title="" /> 
</ul> 
<div id="showcase_nav"> 
<a href="index2.html" class="close_showcase">close</a> 
<a href="project_2.html" id="showcase_next">next project</a> 
</div> 
</div>

來源

2010-07-16 Raphael

你好，它只是在我的電腦上正常工作（雖然我清除了我的緩存），我嘗試使用FF 3.6。我建議你的一件事是壓縮圖像的大小，它需要大約'22'秒來下載所有內容 – 2010-07-16 15:14:08

謝謝！ theres很多未壓縮的煙花png在那裏生病嘗試compressig ...很好看，但任何人都可以證實它的工作原理（不適合更新圖像） – Raphael 2010-07-17 03:02:26

我壓縮了所有的圖像，但行爲仍然不穩定，有時會加載，有時它不...幫助！ – Raphael 2010-07-17 08:24:51

我想出瞭解決問題的一個令人費解的方式。在

$(window).load(function(){ 
    showcase_laoder(); 
})

因爲$(window).load()等待內容的負載

來源

2010-08-01 21:35:39 Raphael

呼叫showcase_loader功能，不像$(document).ready();

$(window).load();將目光轉向圖片，並確保每個圖像內容已經被加載，或檢查每個圖像它是否被加載。

來源

2011-12-14 17:10:59

jQuery的.load（）：回調幻燈片功能不會加載所有圖像正確首先加載，但隨後負載上第二.load（）

回答

相關問題