檢查是否已加載DIV中的圖像？
[英]Check if images in DIV are loaded?
問題描述
我想知道是否可以在運行執行之前檢查div中的所有圖像是否已加載？
HTML：
<body onload="check()">
<div id="testdiv">
<img id="test" src="assets/image.jpg" />
</div>
</body>
使用Javascript：
function check() {
var test = document.getElementById("testdiv").complete;
alert(test);
}
它返回“未定義”。
5 個解決方案
解決方案1
1 2014-02-21 17:40:25
如果要檢查是否所有圖像都已正確加載，可以將代碼包裝在$(window).load(function() {....});
$(window).load(function() {
alert('test');
});
或者您也可以嘗試以下操作：
var $images = $('div#testdiv img');
var loaded_images_total = 0;
$images.load(function(){
loaded_images_total ++;
if (loaded_images_total == $images.length) {
alert('test');
}
});
解決方案2
1 2014-02-21 17:40:45
您可以使用load事件。
» 小提琴樣本 «
$(document).ready(function(){
$("#test").load(function(e) {
console.log("OK", e);
})
.error(function(e) {
console.log("ERROR", e);
});
})
在這里我們附上，如通過例如從OP，到load上<img>標記。
<div id="testdiv">
<img id="test" src="http://lorempixel.com/output/fashion-q-c-300-200-2.jpg" />
</div>
解決方案3
1 2014-02-21 17:46:38
這個怎么樣，
<script type="text/javascript">
function check(d) {
alert(d.id+":: Loaded" );
}
</script>
<img id="test" src="assets/image.jpg" onload="check(this)"/>
解決方案4
0 2014-02-21 17:56:18
$(window).load(function(){
// everything on the page has loaded.
});
事情一旦加載就會觸發。 但是，它不會告訴您特定的div是否已加載所有資產，也不會告訴您圖像是否損壞。
如果您要檢查特定的div，則比較困難。 您實際上無法檢查是否在HTML解析后加載了圖像，因為HTML引擎可以在腳本獲得添加監聽器之前加載圖像。 因此，您需要在添加每個圖像時直接向其添加偵聽器，這意味着您必須成為其中一個。
沒有做到這一點的“糖”方式，這會給您帶來類似以下的問題：
<div id="dynamic"></div>
<script>
// load directly in the page. Not necessary, but simpler to talk about.
var imageCounter=0, images = ['foo/bar.jpg','foo/bar2.jpg', .... ];
function checkCounter(){
imageCounter++;
if (imageCounter >=images.length)
{
// load completed. Do some stuff.
}
};
for (var ii=0; ii< images.length; ii++)
{
var pImg = $('<img>')
.on('load',function(){imageCounter++; checkCounter();})
.on('error', function(){imageCounter++;checkCounter();});
pImg.attr('src', images[ii]);
pImg.appendTo('#dynamic');
}
</script>
解決方案5
0 2019-06-03 16:36:38
這是一個ES6函數awaitImgs() ，您可以使用它在指定容器元素中的所有<img>元素都已解析（即加載或加載失敗）之后執行任務。
基本用法：
awaitImgs(someContainerElement).then(complete).catch(failed);
歡迎發表評論。
<html> <head><title>Image Load Test</title></head> <body> <div id="content"> <img src=""/> <img src="some_image.png"/> <img src="some_other_image.jpg"/> </div> <script type="text/javascript"> /** * Returns a promise that is fulfilled when ALL <img> elements in the specified container element * have either loaded, failed to load, or never attempted to load due to an empty or missing src * attribute. */ let awaitImgs = (elem) => { console.log('=================BEGIN WAITING FOR IMGS==============='); return new Promise((resolve) => { let imgs = Array.from(elem.querySelectorAll('img')); let numImgs = imgs.length; let numImgsResolved = 0; let numImgsFailed = 0; let handleImgLoaded = (img) => { console.log('Complete: ' + img.src); numImgsResolved++; checkForDone(); }; let handleImgFailed = (img) => { console.log('Failed: ' + img.src); numImgsResolved++; numImgsFailed++; checkForDone(); }; let checkForDone = () => { if (numImgsResolved === numImgs) { // All images have either loaded or failed, so fulfil the Promise resolve(numImgsFailed); } }; console.log(`Waiting for ${imgs.length} images...`); // Examine each image to determine whether it is already complete. If an given image isn't // already complete, wait for its onload or onerror events to be dispatched. imgs.forEach((img) => { console.log(`src: ${img.getAttribute('src')}, complete: ${img.complete}, naturalWidth: ${img.naturalWidth}`); let imgIsEmpty = !img.hasAttribute('src') || img.getAttribute('src') === ''; if (imgIsEmpty) { // This img element has no src attribute OR src is set to the empty string. This is an // edge case that should be avoided. We treat such img elements as resolved. handleImgLoaded(img); } else if (img.complete) { // This image has finished loading if (img.naturalWidth > 0) { // We treat complete images with greater-than-zero width as valid and resolved handleImgLoaded(img); } else { // We treat complete images with 0 width as invalid, but resolved handleImgFailed(img); } } else { // This image hasn't finished loading yet, so handle load and // error cases with event listeners let loadListener = (e) => { e.target.removeEventListener('load', loadListener); handleImgLoaded(e.target); }; img.addEventListener('load', loadListener); let errorListener = (e) => { e.target.removeEventListener('error', errorListener); handleImgFailed(e.target); }; img.addEventListener('error', errorListener); } }); }); }; // Example usage: let div = document.querySelector('#content'); let complete = (numFailed) => { console.log(`All images resolved. Number of images that failed to load: ${numFailed}`); // Work to perform after all images have loaded goes here }; let failed = (result) => { // Safety net that executes if an exception is thrown inside awaitImgs() console.log(`Error: ${result}`); }; awaitImgs(div).then(complete).catch(failed); </script> </body> </html>
檢查圖像是否已加載
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.