一旦所有圖像準備好顯示，顯示網站

我使用此代碼爲整個網站的不透明度設置動畫。一旦所有圖像準備好顯示，顯示網站

HTML 
<body> 
     <script>document.body.className += ' fade-out';</script> 
... 
</body> 

JS 
$(function(){ 
      $('body').removeClass('fade-out'); 
}); 

CSS: 
body{ 
    transition:1s all; 
} 
body.fade-out { 
    opacity: 0; 
    transition: none; 
}

拿這個筆例如： https://codepen.io/timsim/pen/bWOoYr

這動畫的網站，不透明度，但它不會等待所有圖像做好準備，以顯示。整個網站正在改變不透明度，然後圖像跳入。不好。這隻會在網站首次加載時發生。

我想在圖像準備好顯示時觸發身體不透明動畫。 window.onload似乎不是正確的地方。你會怎麼做？

來源

2017-05-22 sanjihan

裏面裹jQuery代碼：

$(window).on("load", function() { 
});

而且不使用$(document).ready();

DOM是準備不加載圖像也時。一旦圖像完成下載，觸發負載將被觸發。所以你的情況：

$(window).on("load", function() { 
    $('body').removeClass('fade-out'); 
});

這應該做你在找什麼

來源

2017-05-22 20:54:57 quirimmo

你可以創建一個函數來預載的圖片。然後，一旦每個人都加載，你可以刪除班級。

const images = ['https://pbs.twimg.com/media/C7gflT8XUAAhsHm.jpg']; 

function loadImg(img) { 
    return new Promise((resolve, reject) => { 
    const imgEl = document.createElement('img'); 
    imgEl.addEventListener('load',() => { 
     resolve(); 
    }); 
    imgEl.src = img; 
    }); 
} 

function loadAll(imageArr) { 
    const promises = imageArr.map(img => loadImg(img)); 
    Promise.all(promises).then(() => { 
    document.querySelector('body').classList.remove('fade-out'); 
    }); 
} 

loadAll(images);

來源

2017-05-22 20:58:00

-2

我認爲setTimeout的將是一個不錯的選擇：

$(function(){ 
      $('body').setTimeout(removeClass('fade-out'), 3000); 
});

，將延遲3秒

來源

2017-05-22 20:58:01

什麼慢互聯網淡出，你會猜測他們的速度？ – CodeLikeBeaker

圖像可能不會在3秒超時後加載 –

那麼你怎麼知道要設置什麼延遲？它被稱爲測試untilyou得到理想的結果 –

一旦所有圖像準備好顯示，顯示網站

回答

相關問題