Tôi muốn biết khi 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?
Nếu không, có cách nào để làm điều đó không?
Câu trả lời:
.complete + gọi lại
Đây là một phương pháp tuân thủ tiêu chuẩn mà không phụ thuộc thêm và chờ đợ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')
})
}img.completecuộc gọi và addEventListenercuộc gọi?
loadngười nghe sự kiện phải ở trong một elsemệnh đề, như img.completecó thể trở thành sự thật trước khi loadsự kiện được kích hoạt, do đó nếu bạn không có khả năng đã loadedgọi hai lần (lưu ý điều này tương đối có khả năng thay đổi img.completechỉ trở thành sự thật khi sự kiện hỏa hoạn).
Image.onload () thường sẽ hoạt động.
Để sử dụng nó, 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:
Cách sử dụng ví dụ:
window.onload = function () {
var logo = document.getElementById('sologo');
logo.onload = function () {
alert ("The image has loaded!");
};
setTimeout(function(){
logo.src = 'https://edmullen.net/test/rc.jpg';
}, 5000);
}; <html>
<head>
<title>Image onload()</title>
</head>
<body>
<img src="#" alt="This image is going to load" id="sologo"/>
<script type="text/javascript">
</script>
</body>
</html>loadsự kiện này không hợp lệ? html.spec.whatwg.org/multipage/webappapis.html#handler-onload là định nghĩa của onload trình xử lý sự kiện.
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 nơi tôi lưu trữ một số đối tượng Hình ảnh trong một mảng, nó sẽ được thêm động vào màn hình và khi chúng đang tải, tôi viết các bản cập nhật cho một div khác trên trang. Đây là một đ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);
}Bạn có thể sử dụng sự kiện load () - trong jQuery nhưng nó sẽ không kích hoạt nếu hình ảnh được tải từ bộ đệm 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 vấn đề đó.
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="">srcvới JS.
myImage.src = https://pmchollywoodlife.files.wordpress.com/2011/12/justin-bieber-bio-photo1.jpg?w=620không lừa
Đâ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');
}Không phù hợp cho năm 2008 khi câu hỏi được hỏi, nhưng những ngày này nó hoạt động tốt với tôi:
async function newImageSrc(src) {
// Get a reference to the image in whatever way suits.
let image = document.getElementById('image-id');
// Update the source.
img.src = src;
// Wait for it to load.
await new Promise((resolve) => { image.onload = resolve; });
// Done!
console.log('image loaded! do something...');
}các chức năng này sẽ giải quyết vấn đề, bạn cần thực hiện DrawThumbnailschức năng và có một biến toàn cục để lưu trữ hình ảnh. Tôi thích có được điều này để làm việc với một đối tượng lớp có ThumbnailImageArraybiến thành viên, nhưng đang gặp khó khă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 } };
}addThumbnailImageschức năng của bạn . Cắt nó xuống mã liên quan và tôi sẽ xóa -1.
Nếu mục tiêu là tạo kiểu cho img sau khi trình duyệt hiển thị hình ảnh, bạn nên:
const img = new Image();
img.src = 'path/to/img.jpg';
img.decode().then(() => {
/* set styles */
/* add img to DOM */
});bởi vì trình duyệt đầu tiên loads the compressed version of image, sau đó decodes it, cuối cùng paintsnó vì không có sự kiện nào cho paintbạn nên chạy logic của bạn sau khi trình duyệt có decodedthẻ img.
Nếu bạn đang sử dụng React.js, bạn có thể làm điều này:
render() {// ...
<img
onLoad={() => this.onImgLoad({ item })}
onError={() => this.onImgLoad({ item })}
src={item.src} key={item.key}
ref={item.key} />// ...}
Ở đâu: