1. घर
  2. सवाल और जवाब
  3. एक छवि लोड होने पर जानने के लिए जावास्क्रिप्ट कॉलबैक

एक छवि लोड होने पर जानने के लिए जावास्क्रिप्ट कॉलबैक

2008-11-11 19 views
76

मैं जानना चाहता हूं कि कोई छवि लोड होने पर कब समाप्त हो गई है। क्या कॉलबैक के साथ ऐसा करने का कोई तरीका है?एक छवि लोड होने पर जानने के लिए जावास्क्रिप्ट कॉलबैक

यदि नहीं, तो क्या ऐसा करने का कोई तरीका है?

स्रोत

2008-11-11 Anonymous

उत्तर

49

Image.onload() अक्सर काम करेगा।

इसका उपयोग करने के लिए, आपको src विशेषता सेट करने से पहले ईवेंट हैंडलर को बांधना सुनिश्चित करना होगा।

संबंधित लिंक:

उदाहरण उपयोग:

<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>

स्रोत

2008-11-11 05:19:46 keparo

+17

FYI करें: OT अनुसार W3C कल्पना, ऑनलोड नहीं आईएमजी तत्वों के लिए एक वैध घटना है। स्पष्ट रूप से ब्राउज़र इसका समर्थन करते हैं, लेकिन यदि आप कल्पना के बारे में परवाह करते हैं और 100% सुनिश्चित नहीं हैं कि आप जिस ब्राउज़र को लक्षित करना चाहते हैं, तो आप इसे पुनर्विचार करना चाहेंगे या कम से कम इसे ध्यान में रखना चाहेंगे। –

+0

बिल्कुल सही। परीक्षण करना सुनिश्चित करें, खासकर अगर आप कुछ अस्पष्ट ब्राउज़रों का समर्थन करने की परवाह करते हैं। – keparo

+3

स्रोत सेट करने के लिए 5 सेकंड का इंतजार क्यों करना एक बुरा विचार लगता है? – quemeful

20

आपको Javascript छवि वर्ग के .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); 
}

स्रोत

2008-11-11 06:12:33

+0

मैंने पहले अपने काम में समान कोड का उपयोग किया है। यह सभी ब्राउज़रों में अच्छी तरह से काम करता है। –

+2

पूरा जाँच के साथ समस्या यह है कि IE9 के साथ शुरू OnLoad घटनाओं से पहले सभी छवियों को लोड किए गए हैं निकाल दिया और उसके लिए मुश्किल है अब चेकिंग समारोह के लिए एक ट्रिगर मिल रहा है। –

10

आप लोड इस्तेमाल कर सकते हैं() - jQuery में घटना लेकिन यह हमेशा सक्रिय नहीं होगा यदि छवि ब्राउज़र कैश से भरी हुई है। इस प्लगइन https://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js का उपयोग उस समस्या को हल करने के लिए किया जा सकता है।

स्रोत

2011-02-06 12:05:55 jimmystormig

+1

ऑनलोड कैश समस्या के लिए धन्यवाद! – hellectronic

0

ये फ़ंक्शन समस्या हल करेंगे, आपको 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 } }; 
}

स्रोत

2012-10-24 16:43:41 dave

+11

इस कोड का अधिकांश अप्रासंगिक है, जिसमें आपके पूरे 'addThumbnailImages' फ़ंक्शन शामिल हैं। इसे प्रासंगिक कोड पर डालें और मैं -1 को हटा दूंगा। –

77

.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') 
    }) 
}

स्रोत: http://www.html5rocks.com/en/tutorials/es6/promises/

स्रोत

2014-06-13 08:48:11

+1

यह गलत जा सकते हैं, तो छवि 'img.complete' कॉल और' addEventListener' कॉल के बीच पूरा करता है? –

+0

@ थॉमसएहले मैं एक विशेषज्ञ नहीं हूं, लेकिन ऐसा लगता है। चलो देखते हैं कि किसी के पास कोई समाधान है या नहीं। –

+0

मुझे लगता है कि यह केवल समानांतर कोड के लिए एक मुद्दा होगा, जो कि अधिकांश जावास्क्रिप्ट शायद नहीं है .. –

0

यहाँ jQuery बराबर है:

var $img = $('img'); 

if ($img.length > 0 && !$img.get(0).complete) { 
    $img.on('load', triggerAction); 
} 

function triggerAction() { 
    alert('img has been loaded'); 
}

स्रोत

2017-03-22 08:43:14

0

जीवन 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="">

स्रोत

2018-01-11 13:38:20

संबंधित मुद्दे

 संबंधित मुद्दे