檢測何時加載圖像列表
[英]Detect when a list of images are loaded
問題描述
我正在使用語義Ui和jQuery制作專輯。 我想編寫一個加載div class="images"中的所有圖像時調用的函數。
有一個加載封面div class="dimmer"涵蓋了所有圖像。 裝入所有圖像后，應取下蓋子。
如何確定何時已加載所有圖像，以便可以取下封面？
這是我到目前為止的代碼：
<div id="loader1" class="ui active dimmer">
<div class="ui text loader">Loading...</div>
</div>
<div id="image1" class="ui small images">
<img src="pics/pic_suzhou/sz1.jpg">
<img src="pics/pic_suzhou/sz2.jpg">
<img src="pics/pic_suzhou/sz3.jpg">
<img src="pics/pic_suzhou/sz4.jpg">
<img src="pics/pic_suzhou/sz5.jpg">
<img src="pics/pic_suzhou/sz6.JPG">
<img src="pics/pic_suzhou/sz7.JPG">
<img src="pics/pic_suzhou/sz8.JPG">
</div>
謝謝！
4 個解決方案
解決方案1
0 2018-11-10 20:38:18
$img.on('load', triggerAction);
function triggerAction() {
//identify the div and put
.style.display = "none";
}
解決方案2
0 2018-11-10 20:42:34
您將封面隱藏在窗口加載事件上，該事件將在加載所有圖像后觸發。
$(window).on('load', function(e){
$('.cover').hide();
});
解決方案3
0 2018-11-10 21:20:43
EDITED！ 我發現它無法像我提供的那樣工作，所以我進行了完整的編輯，提出了它的工作方式。 我認為最好的方法是使用Promises。 這將確保即使偶數都被遺漏了，因為在事件觸發后附加了處理程序，我們將能夠獲得其作為失敗成功的結果。 由於緩存的圖像和/或異步處理，其他方式可能會失敗。 這就是承諾的成因。
檢查運行下面的代碼片段：
$(function(){ function load(img) { return new Promise(function(resolve, reject) { img.onload = function() { console.log(img); resolve('OK'); }; img.onerror = function() { reject(Error("Loading error")); }; }); } var all = $.map($('#image1 img').get(), function(item) { return load(item); }); Promise.all(all).then(function() { console.log('All loaded'); }, function() { console.log('One or more failed'); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="image1"> <img src="https://shop.r10s.jp/book/cabinet/5963/4988064935963.jpg?v=30"> <img src="https://images-na.ssl-images-amazon.com/images/I/816L51ge55L._SL1202_.jpg?v=30"> <img src="https://img-shop.mu-mo.net/img/pc_sp/aaa2018_m2th4i/header01.jpg?v=30"> <img src="https://img-shop.mu-mo.net/img/pc_sp/aaa2018_m2th4i/header01.jpg?v=30"> </div>
解決方案4
0 2018-11-11 07:51:22
您不需要jQuery。 現代Javascript提供了處理該功能的慣用方式，是普通jQuery功能的更好替代方案。
重要提示：目前，尚無100％可靠的方法來檢測HTML中的圖像何時完成加載 。
因此，最可靠的方法是動態創建圖像元素並使用'load'事件。 您還可以回退到“文檔”上的“加載”事件，該事件將在加載頁面上的所有資源時觸發。
例如，以下代碼在加載完所有圖像后刪除您的dimmer div，並且在window.onload上具有一個后備選項，以刪除即使有任何錯誤也會觸發的dimmer：
const loader = document.getElementById('loader1'); const container = document.getElementById('image1'); const imageURLs = [ "https://lorempixel.com/48/48/abstract/1/", "https://lorempixel.com/48/48/abstract/2/", "https://lorempixel.com/48/48/abstract/3/", "https://lorempixel.com/48/48/abstract/4/", "https://lorempixel.com/48/48/abstract/5/", "https://lorempixel.com/48/48/abstract/6/", "https://lorempixel.com/48/48/abstract/7/", "https://lorempixel.com/48/48/abstract/8/", ]; // Fallback handler that will run when everything has loaded. window.addEventListener('load', onDocumentLoaded); // Create images from list of sources const images = imageURLs.map(src => { const image = new Image(); // Return a promise for the loaded image. return new Promise((resolve, reject) => { // resolve when loaded image.addEventListener('load', () => { console.log(`image loaded ${src}`); resolve(); }); // reject on error image.addEventListener('error', (err) => { console.log(`error loading ${src}`); reject(err); }); // Once the handlers are set, set the src and add the images to the DOM. image.src = src; container.appendChild(image); }); }); // Act once all promises are resolved: Promise.all(images) .then(onAllImagesLoaded) .catch(e => { console.log('something went wrong.'); }); // All images have been loaded -- success case. function onAllImagesLoaded() { console.log('all images loaded'); loader.remove(); } // Everything finished loading -- fallback and error cases. function onDocumentLoaded() { console.log('all content loaded'); loader.remove(); }
<html> <head></head> <body> <div id="loader1" class="ui active dimmer"> <div class="ui text loader">Loading...</div> </div> <div id="image1" class="ui small images"> </div> </body> </html>
如何檢測何時加載所有圖像並將元素渲染到適當的高度
[英]How to detect when all images are loaded and elements are rendered at their appropriate heights
如何檢測AJAX何時加載通過JSON數據引用的圖像？
[英]How to detect when images referenced via JSON data are loaded with AJAX?
檢測何時將腳本列表全部加載到javascript中（使用名稱空間）。
[英]Detect when list of scripts are all loaded in javascript (Using namespaces).
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.