76
Tôi muốn biết khi nào một hình ảnh đã tải xong. Có cách nào để làm điều đó với một cuộc gọi lại không?Gọi lại Javascript để biết khi nào một hình ảnh được tải
Nếu không, có cách nào để làm điều đó không?
A
Trả lời
49
Image.onload() sẽ thường hoạt động.
Để sử dụng, bạn cần chắc chắn ràng buộc trình xử lý sự kiện trước khi bạn đặt thuộc tính src.
Liên kết liên quan:
Ví dụ Cách sử dụng:
<html>
<head>
<title>Image onload()</title>
</head>
<body>
<img src="#" alt="This image is going to load" id="sologo"/>
<script type="text/javascript">
window.onload = function() {
var logo = document.getElementById('sologo');
logo.onload = function() {
alert ("The image has loaded!");
};
setTimeout(function(){
logo.src = 'http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png';
}, 5000);
};
</script>
</body>
</html>
20
Bạn có thể sử dụng thuộc tính .complete của lớp hình ảnh Javascript.
Tôi có một ứng dụng mà tôi lưu trữ một số đối tượng Hình ảnh trong một mảng, sẽ được thêm động vào màn hình và khi chúng đang tải, tôi viết cập nhật cho một div khác trên trang. Dưới đây là đoạn mã:
var gAllImages = [];
function makeThumbDivs(thumbnailsBegin, thumbnailsEnd)
{
gAllImages = [];
for (var i = thumbnailsBegin; i < thumbnailsEnd; i++)
{
var theImage = new Image();
theImage.src = "thumbs/" + getFilename(globals.gAllPageGUIDs[i]);
gAllImages.push(theImage);
setTimeout('checkForAllImagesLoaded()', 5);
window.status="Creating thumbnail "+(i+1)+" of " + thumbnailsEnd;
// make a new div containing that image
makeASingleThumbDiv(globals.gAllPageGUIDs[i]);
}
}
function checkForAllImagesLoaded()
{
for (var i = 0; i < gAllImages.length; i++) {
if (!gAllImages[i].complete) {
var percentage = i * 100.0/(gAllImages.length);
percentage = percentage.toFixed(0).toString() + ' %';
userMessagesController.setMessage("loading... " + percentage);
setTimeout('checkForAllImagesLoaded()', 20);
return;
}
}
userMessagesController.setMessage(globals.defaultTitle);
}
+0
Tôi đã sử dụng mã tương tự trong công việc của mình trước đây. Điều này hoạt động tốt trong tất cả các trình duyệt. –
+2
Vấn đề với việc kiểm tra hoàn tất là bắt đầu với IE9 các sự kiện OnLoad được kích hoạt trước khi tất cả các hình ảnh được tải và thật khó để tìm thấy một kích hoạt cho chức năng kiểm tra ngay bây giờ. –
10
Bạn có thể sử dụng tải() - sự kiện trong jQuery nhưng không phải lúc nào cũng kích hoạt nếu hình ảnh được tải từ bộ nhớ cache của trình duyệt. Plugin này https://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js có thể được sử dụng để khắc phục sự cố đó.
+1
cảm ơn sự cố bộ nhớ cache tải lên! – hellectronic
0
các chức năng này sẽ giải quyết được sự cố, bạn cần triển khai hàm DrawThumbnails và có biến toàn cục để lưu trữ hình ảnh. Tôi thích làm việc này với một đối tượng lớp có ThumbnailImageArray là một biến thành viên, nhưng tôi đang vật lộn!
gọi như trong addThumbnailImages(10);
var ThumbnailImageArray = [];
function addThumbnailImages(MaxNumberOfImages)
{
var imgs = [];
for (var i=1; i<MaxNumberOfImages; i++)
{
imgs.push(i+".jpeg");
}
preloadimages(imgs).done(function (images){
var c=0;
for(var i=0; i<images.length; i++)
{
if(images[i].width >0)
{
if(c != i)
images[c] = images[i];
c++;
}
}
images.length = c;
DrawThumbnails();
});
}
function preloadimages(arr)
{
var loadedimages=0
var postaction=function(){}
var arr=(typeof arr!="object")? [arr] : arr
function imageloadpost()
{
loadedimages++;
if (loadedimages==arr.length)
{
postaction(ThumbnailImageArray); //call postaction and pass in newimages array as parameter
}
};
for (var i=0; i<arr.length; i++)
{
ThumbnailImageArray[i]=new Image();
ThumbnailImageArray[i].src=arr[i];
ThumbnailImageArray[i].onload=function(){ imageloadpost();};
ThumbnailImageArray[i].onerror=function(){ imageloadpost();};
}
//return blank object with done() method
//remember user defined callback functions to be called when images load
return { done:function(f){ postaction=f || postaction } };
}
+11
Hầu hết mã này không liên quan, kể cả toàn bộ hàm 'addThumbnailImages' của bạn. Pare nó xuống mã có liên quan và tôi sẽ loại bỏ -1. –
77
.complete + callback là một tiêu chuẩn tuân thủ, không có cách nào thư viện. Đây đợi không quá cần thiết:
var img = document.querySelector('img')
function loaded() {
alert('loaded')
}
if (img.complete) {
loaded()
} else {
img.addEventListener('load', loaded)
img.addEventListener('error', function() {
alert('error')
})
}
+1
Điều này có thể xảy ra nếu hình ảnh hoàn thành giữa cuộc gọi 'img.complete' và lệnh' addEventListener'? –
+0
@ThomasAhle Tôi không phải là chuyên gia, nhưng điều đó dường như có thể. Hãy xem liệu có ai có giải pháp không. –
+0
Tôi đoán nó sẽ chỉ là một vấn đề cho mã song song, mà hầu hết javascript có lẽ không phải là .. –
0
Đây là jQuery tương đương:
var $img = $('img');
if ($img.length > 0 && !$img.get(0).complete) {
$img.on('load', triggerAction);
}
function triggerAction() {
alert('img has been loaded');
}
0
Cuộc sống quá ngắn cho jquery.
function waitForImageToLoad(imageElement){
return new Promise(resolve=>{imageElement.onload = resolve})
}
var myImage = document.getElementById('myImage');
var newImageSrc = "https://pmchollywoodlife.files.wordpress.com/2011/12/justin-bieber-bio-photo1.jpg?w=620"
myImage.src = newImageSrc;
waitForImageToLoad(myImage).then(()=>{
// Image have loaded.
console.log('Loaded lol')
});<img id="myImage" src="">
FYI: Theo ot spec W3C, onload không phải là một sự kiện có giá trị cho các yếu tố IMG. Rõ ràng các trình duyệt hỗ trợ nó, nhưng nếu bạn quan tâm đến thông số kỹ thuật và không chắc chắn 100% tất cả các trình duyệt bạn muốn nhắm mục tiêu hỗ trợ này, bạn có thể muốn suy nghĩ lại hoặc ít nhất hãy ghi nhớ nó. –
Chính xác. Hãy chắc chắn kiểm tra, đặc biệt nếu bạn quan tâm đến việc hỗ trợ một số trình duyệt tối nghĩa. – keparo
tại sao chờ 5 giây để đặt nguồn dường như là một ý tưởng tồi? – quemeful