Bir görüntünün ne zaman yükleneceğini bilmek istiyorum. Geri arama ile yapmanın bir yolu var mı?
Değilse, bunu yapmanın bir yolu var mı?
Yanıtlar:
.complete + geri arama
Bu, ekstra bağımlılıkları olmayan standartlara uygun bir yöntemdir ve gereğinden fazla beklemez:
var img = document.querySelector('img')
function loaded() {
alert('loaded')
}
if (img.complete) {
loaded()
} else {
img.addEventListener('load', loaded)
img.addEventListener('error', function() {
alert('error')
})
}Kaynak: http://www.html5rocks.com/en/tutorials/es6/promises/
img.completeçağrı ile çağrı arasında tamamlanırsa bu yanlış olabilir addEventListenermi?
load olay dinleyicisi olay tetiklenmeden önce gerçekleşebileceği gibi bir maddede olmalıdır , bu nedenle eğer potansiyel olarak iki kez arayamazdınız (bunun yalnızca olay yangınları). elseimg.completeloadloadedimg.complete
Image.onload () genellikle işe yarar .
Bunu kullanmak için, src niteliğini ayarlamadan önce olay işleyiciyi bağladığınızdan emin olmanız gerekir.
İlgili Bağlantılar:
Örnek Kullanım:
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>loadEtkinliğin geçerli olmadığını düşündüren neye bakıyorsunuz ? html.spec.whatwg.org/multipage/webappapis.html#handler-onload , onload olay işleyicisinin tanımıdır .
Javascript image sınıfının .complete özelliğini kullanabilirsiniz.
Ekrana dinamik olarak eklenecek bir dizi görüntü nesnesini sakladığım bir uygulama var ve yüklenirken sayfadaki başka bir div için güncellemeler yazıyorum. İşte bir kod snippet'i:
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);
}Load () - olayını jQuery'de kullanabilirsiniz, ancak görüntü tarayıcı önbelleğinden yüklenirse her zaman tetiklenmez. Bu eklenti https://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js bu sorunu çözmek için kullanılabilir.
Hayat jquery için çok kısa.
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="">srcJS ile ekleyerek kafa karıştırıcı görünmesini sağlıyorsunuz .
myImage.src = https://pmchollywoodlife.files.wordpress.com/2011/12/justin-bieber-bio-photo1.jpg?w=620hile yapar.
İşte jQuery eşdeğeri:
var $img = $('img');
if ($img.length > 0 && !$img.get(0).complete) {
$img.on('load', triggerAction);
}
function triggerAction() {
alert('img has been loaded');
}Sorunun sorulduğu 2008 için uygun değil, ancak bu günlerde bu benim için iyi çalışıyor:
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...');
}bu işlevler sorunu çözecektir, DrawThumbnailsişlevi uygulamanız ve görüntüleri saklamak için küresel bir değişkeniniz olması gerekir. Bunu bir sınıf nesnesi ile çalışmak için seviyorumThumbnailImageArrayÜye değişken , ama mücadele !
olarak adlandırıldı 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 } };
}addThumbnailImagesfonksiyonunuz dahil, bu kodun çoğu önemsizdir . İlgili koda kadar parlat ve -1'i kaldıracağım.
Amaç, img, tarayıcı resmi oluşturduktan sonra biçimlendirmekse:
const img = new Image();
img.src = 'path/to/img.jpg';
img.decode().then(() => {
/* set styles */
/* add img to DOM */
});çünkü önce tarayıcı loads the compressed version of image, sonra decodes itnihayet paints. painttarayıcı decodedimg etiketine sahip olduktan sonra mantığınızı çalıştırmanız için herhangi bir etkinlik olmadığından .
React.js kullanıyorsanız, bunu yapabilirsiniz:
render() {// ...
<img
onLoad={() => this.onImgLoad({ item })}
onError={() => this.onImgLoad({ item })}
src={item.src} key={item.key}
ref={item.key} />// ...}
Nerede: