मैं जानना चाहता हूं कि एक छवि ने कब लोड किया है। क्या कॉलबैक के साथ ऐसा करने का कोई तरीका है?
यदि नहीं, तो क्या ऐसा करने का कोई तरीका है?
जवाबों:
.complete + कॉलबैक
यह अतिरिक्त निर्भरता के बिना एक मानक अनुपालन विधि है, और आवश्यकता से अधिक इंतजार नहीं करता है:
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.completeकॉल और कॉल के बीच छवि पूरी हो जाती है तो क्या यह गलत हो सकता है addEventListener?
loadईवेंट श्रोता को एक elseखंड में होना चाहिए , क्योंकि ईवेंट के निकाल दिए जाने img.completeसे पहले यह सच हो सकता loadहै, इसलिए यदि ऐसा नहीं होता तो आप संभावित loadedरूप से दो बार कॉल कर सकते थे (ध्यान दें कि यह अपेक्षाकृत रूप से बदलने की संभावना है कि img.completeकेवल ईवेंट के सत्य होने पर ही आग)।
Image.onload () अक्सर काम करेगा।
इसका उपयोग करने के लिए, आपको src विशेषता सेट करने से पहले ईवेंट हैंडलर को बांधना सुनिश्चित करना होगा।
सम्बंधित लिंक्स:
उदाहरण उपयोग:
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>loadघटना वैध नहीं है? html.spec.whatwg.org/multipage/webappapis.html#handler-onloadonload ईवेंट हैंडलर की परिभाषा है ।
आप जावास्क्रिप्ट छवि वर्ग की .complete संपत्ति का उपयोग कर सकते हैं।
मेरे पास एक एप्लिकेशन है जहां मैं एक सरणी में कई छवि ऑब्जेक्ट संग्रहीत करता हूं, जिसे गतिशील रूप से स्क्रीन पर जोड़ा जाएगा, और जैसा कि वे लोड कर रहे हैं मैं पेज पर किसी अन्य div के लिए अपडेट लिखता हूं। यहाँ एक कोड स्निपेट है:
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);
}
आप jQuery में लोड () - ईवेंट का उपयोग कर सकते हैं लेकिन ब्राउज़र कैश से छवि लोड होने पर यह हमेशा फायर नहीं करेगा। इस प्लगइन https://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js का उपयोग उस समस्या को दूर करने के लिए किया जा सकता है।
जीवन बहुत कम है 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="">srcJS के साथ जोड़कर भ्रमित कर रहे हैं ।
myImage.src = https://pmchollywoodlife.files.wordpress.com/2011/12/justin-bieber-bio-photo1.jpg?w=620उसने चाल चली।
यहाँ jQuery समतुल्य है:
var $img = $('img');
if ($img.length > 0 && !$img.get(0).complete) {
$img.on('load', triggerAction);
}
function triggerAction() {
alert('img has been loaded');
}
2008 के लिए उपयुक्त नहीं है जब सवाल पूछा गया था, लेकिन इन दिनों यह मेरे लिए अच्छी तरह से काम करता है:
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...');
}
ये फ़ंक्शन समस्या को हल करेंगे, आपको DrawThumbnailsफ़ंक्शन को लागू करने और छवियों को संग्रहीत करने के लिए एक वैश्विक चर होना चाहिए। मुझे यह एक वर्ग वस्तु के साथ काम करने के लिए बहुत पसंद है जो ThumbnailImageArrayएक सदस्य चर के रूप में है, लेकिन संघर्ष कर रहा हूं!
में कहा जाता है 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 } };
}
addThumbnailImagesकार्य शामिल है। इसे संबंधित कोड में डाल दें और मैं -1 को हटा दूंगा।
यदि ब्राउज़र की छवि प्रदान करने के बाद लक्ष्य को स्टाइल करना है, तो आपको चाहिए:
const img = new Image();
img.src = 'path/to/img.jpg';
img.decode().then(() => {
/* set styles */
/* add img to DOM */
});क्योंकि ब्राउज़र पहले loads the compressed version of image, फिर decodes it, आखिरकार paintsयह। चूंकि paintआपके पास कोई ऐसी घटना नहीं है जिसके लिए आपको अपने तर्क को चलाना चाहिए क्योंकि ब्राउज़र में decodedimg टैग है।
यदि आप React.js का उपयोग कर रहे हैं, तो आप ऐसा कर सकते हैं:
render() {// ...
<img
onLoad={() => this.onImgLoad({ item })}
onError={() => this.onImgLoad({ item })}
src={item.src} key={item.key}
ref={item.key} />// ...}
कहाँ पे: