waitForImages插件 - 不等待

我的jquery/js代碼不會等待加載的圖像淡出。問題是什麼？waitForImages插件 - 不等待

$('#entry').css('background-image','url(../img/backg3.jpg)').waitForImages(function() { 
 
    $('#load').fadeOut(1000); 
 
\t $('.spinner').fadeOut(1000); 
 
});

\t /******************* 
 

 
Loading 
 

 
*********************/ 
 

 
\t #load { 
 
\t \t position:absolute; 
 
\t \t height:100vh; 
 
\t \t width:100vw; \t 
 
\t \t background-color:#ddd; 
 
\t \t z-index:1000; 
 
\t \t /*-moz-transition:all 2s ease-out; 
 
\t \t -webkit-transition:all 2s ease-out; 
 
\t \t -webkit-transition:all 2s ease-out; 
 
\t \t transition:all 2s ease-out;*/ 
 
\t } 
 
\t 
 
\t @-o-keyframes spin { 
 
\t \t \t 100%{ 
 
\t \t \t \t -o-transform: rotate(360deg); 
 
\t \t \t \t transform: rotate(360deg); 
 
\t \t \t } 
 
\t \t } 
 

 
\t @-moz-keyframes spin { 
 
\t \t \t 100%{ 
 
\t \t \t \t -moz-transform: rotate(360deg); 
 
\t \t \t \t transform: rotate(360deg); 
 
\t \t \t } 
 
\t \t } 
 

 
\t @-webkit-keyframes spin { 
 
\t \t \t 100%{ 
 
\t \t \t \t -webkit-transform: rotate(360deg); 
 
\t \t \t \t transform: rotate(360deg); 
 
\t \t \t } 
 
\t \t } 
 

 
\t @keyframes spin { 
 
\t \t \t 100%{ 
 
\t \t \t \t transform: rotate(360deg); 
 
\t \t \t } 
 
\t \t } 
 

 
\t .spinner { 
 
\t \t position:absolute; 
 
\t \t top:45vh; 
 
\t \t left:45vw; 
 
\t \t width:5vh; 
 
\t \t height:5vh; 
 
\t \t border: 6px solid #F90; 
 
\t \t border-left-color:#FC3; 
 
\t \t border-bottom-color:#FF6; 
 
\t \t border-right-color:transparent; 
 
\t \t border-radius:100%; 
 
\t \t animation: spin 400ms infinite linear; 
 
\t \t margin: auto; 
 
\t \t } 
 
\t

<div id="load"> 
 
\t \t <div class="spinner"></div> \t 
 
</div>

所以我想在我的背景圖像加載到保持微調，但它褪色奏無圖像。

頁 - http://sarosacramento.com/ 插件 - https://github.com/alexanderdickson/waitForImages

來源

2015-09-04 João Saro

你可以在[JSFiddle]（http://jsfiddle.net）中重現你的問題嗎？ – leigero

你可以在這裏看到：http://www.sarosacramento.com –

從他們的GitHub網頁，它看起來像你應該申請.waitForImages()一個元素選擇器（無論其有圖像的兒童或者其CSS圖片）。在您的代碼中，不是將其應用於選擇器，而是首先添加CSS，然後嘗試應用.waitForImage()，這將不起作用，因爲.css（）不會返回選擇器。嘗試改爲：

$('#entry').waitForImages(function() { 
    $('#load').fadeOut(1000); 
    $('.spinner').fadeOut(1000); 
});

的JS，只是把背景圖像中正常CSS：

#entry { 
    background-image: url(../img/backg3.jpg); 
}

（如果你必須通過JS設置它，這樣做將.waitForImages（）到$之前（「入口」）：

$('#entry').css('background-image','url(../img/backg3.jpg)'); 
$('#entry').waitForImages(function() { ...

雖然我沒有實際測試過這一點）

下面是一個例子：http://jsfiddle.net/aq9t6kvk/2/。（它主要使用你的代碼，但是我使用了一些不在我們的緩存中的圖像，但是因爲第一個可能已經加載，而JSFiddle正在「初始化真棒」，所以後續的「運行」 s）

來源

2015-09-04 20:02:18

css（）帶有2個參數* *返回插件可以使用的東西。 – alex

waitForImages插件 - 不等待

回答

相關問題