जांचें कि क्या कोई छवि jQuery के साथ भरी हुई है (कोई त्रुटि नहीं)

224

मैं jQuery लाइब्रेरी के साथ जावास्क्रिप्ट का उपयोग कर रहा हूं, जो एक अनियंत्रित सूची में शामिल छवि थंबनेल को हेरफेर करने के लिए है। जब छवि लोड होती है तो यह एक काम करता है, जब एक त्रुटि होती है तो यह कुछ और करता है। मैं jQuery load()और error()विधियों को घटनाओं के रूप में उपयोग कर रहा हूं । इन घटनाओं के बाद, मैं यह सुनिश्चित करने के लिए छवि DOM तत्व की जाँच करता हूँ। यह सुनिश्चित करने के लिए कि jQuery घटनाओं को पंजीकृत करने से पहले छवि को पहले से लोड नहीं किया गया था।

यह सही ढंग से काम करता है सिवाय इसके कि जब jQuery घटनाओं को पंजीकृत करने से पहले कोई त्रुटि होती है। एकमात्र उपाय जो मैं सोच सकता हूं कि onerrorविश्व स्तर पर (या नोड पर यह स्वयं) कहीं "ध्वज" को संग्रहीत करने के लिए img विशेषता का उपयोग करना है, जो कहता है कि यह विफल हो गया है इसलिए jQuery चेक करते समय उस "स्टोर / नोड" की जांच कर सकता है।

किसी के पास एक बेहतर उपाय है?

संपादित करें: मुख्य बिंदुओं को बोल्ड किया गया है और नीचे अतिरिक्त विवरण जोड़ा गया है: मैं जाँच रहा हूं कि क्या कोई छवि पूर्ण है (उर्फ लोड किया गया है) बाद में मैं छवि पर लोड और त्रुटि घटना जोड़ता हूं। इस तरह, अगर घटनाओं को पंजीकृत करने से पहले छवि लोड की गई थी , तो मुझे अभी भी पता चल जाएगा। अगर घटनाओं के बाद छवि लोड नहीं होती है, तो जब यह होता है तो घटनाओं का ध्यान रखा जाएगा। इसके साथ समस्या यह है, मैं आसानी से जांच कर सकता हूं कि क्या कोई छवि पहले से लोड है, लेकिन मैं नहीं बता सकता कि क्या कोई त्रुटि हुई।

javascript  jquery  image  dom  jquery-events 
— विलियम
स्रोत
आप jQuery की घटनाओं को कब रजिस्टर करते हैं? शायद कुछ कोड मदद करेंगे। :)
— ठीक है
बहुत सारे कोड हैं, जो मैंने ऊपर कहा था कि मैं जो कर रहा हूं उसका सिर्फ एक बहुत ही सरल संस्करण है। DOM के लोड होने के बाद मैं घटनाओं को कॉल करता हूं, थंबनेल में घटनाओं को जोड़ने के लिए एक विधि कहा जाता है।
— विलियम
1
— स्टीव तौबर

जवाबों:

250

एक अन्य विकल्प मेमोरी इमेज एलिमेंट बनाकर और उसकी विशेषता को मूल इमेज के मूल गुण में सेट करके onload/ या onerrorइवेंट्स को ट्रिगर करना है । यहाँ एक उदाहरण है कि मेरा क्या मतलब है:srcsrc

$("<img/>")
    .on('load', function() { console.log("image loaded correctly"); })
    .on('error', function() { console.log("error loading image"); })
    .attr("src", $(originalImage).attr("src"))
;

उम्मीद है की यह मदद करेगा!

— जावी
स्रोत
27
लगता है के रूप में अच्छी तरह से काम करने के रूप में मुझे उम्मीद नहीं थी। Google Chrome में यह समस्या होने लगती है जब छवि पहले से ही कैश में होती है। यह लोड () विधि को ट्रिगर नहीं करता है। :(
— विलियम
4
उग्ग, तुम सही हो। Chrome निश्चित रूप से सबसे अधिक कष्टप्रद ब्राउज़र है जिसे विकसित करना है। उज्ज्वल पर, मुझे लगता है कि मुझे एक काम मिल सकता है: छवि स्रोत को "" फिर मूल स्रोत पर सेट करें। मैं अपना जवाब अपडेट करूंगा।
— ज़वी
1
आप रखना चाहिए .attrलाइन के बाद.load और .errorलाइनों। अन्यथा आप जोखिम उठाते हैं कि उन कॉलबैक को जोड़ने से पहले छवि लोड हो सकती है (या एक त्रुटि का सामना कर सकती है) , और उन्हें नहीं बुलाया जाएगा।
— कॉलम
19
@Xavi क्रोम इंटरनेट एक्सप्लोरर 7 या उससे कम के विकास के लिए सबसे कष्टप्रद ब्राउज़र नहीं है। छवि भार में $ _GET पैरामीटर जोड़ने के अलावा, हर बार एक नई छवि लोड होगी, जैसे कि Gromix सुझाया गया है।
— एसएसएच इस
10
.load()और .error()तरीकों को भ्रमित कर रहे हैं और अब पदावनत उपयोग .on()और प्रयोग loadऔर errorके रूप में की घटनाओं।
— फ़रश - ०२:१२ पर LetsWP.io
235

उस क्रम में गुणों completeऔर naturalWidthगुणों की जाँच करें ।

https://stereochro.me/ideas/detecting-broken-images-js

function IsImageOk(img) {
    // During the onload event, IE correctly identifies any images that
    // weren’t downloaded as not complete. Others should too. Gecko-based
    // browsers act like NS4 in that they report this incorrectly.
    if (!img.complete) {
        return false;
    }

    // However, they do have two very useful properties: naturalWidth and
    // naturalHeight. These give the true size of the image. If it failed
    // to load, either of these should be zero.
    if (img.naturalWidth === 0) {
        return false;
    }

    // No other way of checking: assume it’s ok.
    return true;
}
— SLaks
स्रोत
1
दिलचस्प है, मैं उस पोस्ट को पहले देख रहा था और मुझे एहसास नहीं था कि वे कर रहे थे! IE के लिए पूर्ण के रूप में naturalWidth IE में परिभाषित नहीं है। अभी इसकी जांच करने जा रहे हैं।
— विलियम
3
जाहिर है, यह केवल पहली बार मज़बूती से काम करता है। यदि आप छवि के src को बदलते हैं, तो कम से कम सफारी मोबाइल प्राकृतिक और पूर्ण दोनों के लिए पहले मूल्य की रिपोर्ट करता रहेगा।
— जियोर्निग
5
वापसी img.complete && टाइपऑफ़ img.naturalWidth! = 'अपरिभाषित' और& img.naturalWidth! = 0;
— एड्रियन सीले
5
@vsync आप शायद एक बार के चेक के रूप में इसका उपयोग करना चाहते हैं, और यदि छवि अभी तक लोड नहीं हुई है, तो एक "लोड" ईवेंट हैंडलर सेट करें। इस चेक को कई बार चलाकर सीपीयू को हथौड़ा करने की कोई आवश्यकता नहीं होनी चाहिए।
— माइकल मार्टिन-स्मकर
2
उन उत्सुक लोगों के लिए, यह बहुत हद तक वही है जो इमेजप्लेबेड लाइब्रेरी से जुड़ा हुआ है। इसलिए, एक बार के उपयोग के लिए, इसके लिए जाएं: github.com/desandro/imagesloaded/blob/master/…
— cincodenada
57

तत्व के लिए W3C HTML विनिर्देशनimg की मेरी समझ के आधार पर , आपको ऐसा करने completeऔर naturalHeightविशेषताओं के संयोजन का उपयोग करने में सक्षम होना चाहिए , जैसे:

function imgLoaded(imgElement) {
  return imgElement.complete && imgElement.naturalHeight !== 0;
}

completeविशेषता के लिए युक्ति से :

यदि निम्न में से कोई भी स्थिति सत्य है, तो IDL विशेषता पूरी होनी चाहिए:

  • Src विशेषता को छोड़ दिया गया है।
  • अंतिम कार्य जो संसाधन प्राप्त करने के बाद नेटवर्किंग कार्य स्रोत द्वारा पंक्तिबद्ध किया जाता है, पंक्तिबद्ध किया गया है।
  • Img तत्व पूरी तरह से उपलब्ध है।
  • Img तत्व टूट गया है।

अन्यथा, विशेषता को गलत वापस करना होगा।

तो अनिवार्य रूप से, यह completeसच है अगर छवि या तो लोड हो रहा है, या लोड करने में विफल रहा है। चूँकि हम केवल वही मामला चाहते हैं जहाँ छवि सफलतापूर्वक भरी हुई है और साथ ही हमें nauturalHeightविशेषता को भी जाँचने की आवश्यकता है :

IDL विशेषताएँ naturalWidthऔर naturalHeightछवि की आंतरिक चौड़ाई और ऊंचाई, सीएसएस पिक्सल में, यदि छवि उपलब्ध हो, या फिर वापस होना चाहिए, तो वापस कर दें।

और availableइस तरह परिभाषित किया गया है:

एक img हमेशा निम्न राज्यों में से एक में होता है:

  • अनुपलब्ध - उपयोगकर्ता एजेंट ने कोई छवि डेटा प्राप्त नहीं किया है।
  • आंशिक रूप से उपलब्ध - उपयोगकर्ता एजेंट ने कुछ छवि डेटा प्राप्त किए हैं।
  • पूरी तरह से उपलब्ध - उपयोगकर्ता एजेंट ने सभी छवि डेटा प्राप्त किए हैं और कम से कम छवि आयाम उपलब्ध हैं।
  • टूटा हुआ - उपयोगकर्ता एजेंट ने वह सभी छवि डेटा प्राप्त किया है जो वह कर सकता है, लेकिन वह छवि आयाम प्राप्त करने के लिए छवि को पर्याप्त रूप से डिकोड नहीं कर सकता है (जैसे छवि दूषित है, या प्रारूप समर्थित नहीं है, या कोई डेटा प्राप्त नहीं किया जा सकता है) ।

जब कोई img तत्व या तो आंशिक रूप से उपलब्ध अवस्था में या पूरी तरह से उपलब्ध अवस्था में होता है, तो इसे उपलब्ध कहा जाता है।

इसलिए यदि छवि "टूटी हुई" है (लोड करने में विफल), तो यह टूटी हुई स्थिति में naturalHeightहोगी , उपलब्ध स्थिति नहीं, इसलिए 0 होगी।

इसलिए, imgElement.complete && imgElement.naturalHeight !== 0हमें यह बताना चाहिए कि क्या छवि सफलतापूर्वक लोड हुई है।

आप इस बारे में W3C HTML विनिर्देश में imgतत्व के लिए , या MDN पर अधिक पढ़ सकते हैं ।

— Ajedi32
स्रोत
1
काम नहीं करता है छवि शैली "सामग्री: url" से भरी हुई है
— deathangel908
1
ऐसा लगता है कि फ़ायरफ़ॉक्स एसवीजी छवियों के साथ फ़ायरफ़ॉक्स में काम नहीं करता है क्योंकि ब्राउज़र प्राकृतिक ऊंचाई / चौड़ाई की रिपोर्ट करता है। प्रासंगिक बग: Bugzilla.mozilla.org/show_bug.cgi?id=1328124
— leeb
20

मैंने कई अलग-अलग तरीके आज़माए और यह तरीका मेरे लिए एकमात्र काम है

//check all images on the page
$('img').each(function(){
    var img = new Image();
    img.onload = function() {
        console.log($(this).attr('src') + ' - done!');
    }
    img.src = $(this).attr('src');
});

DOM और रेडी में सभी चित्र लोड होने के बाद आप एक कॉलबैक फ़ंक्शन भी जोड़ सकते हैं। यह गतिशील रूप से जोड़े गए चित्रों के लिए भी लागू होता है। http://jsfiddle.net/kalmarsh80/nrAPk/

— कल
स्रोत
jsfiddle लिंक टूटा
— एलेक्स कार्शिन
1
मैंने ऊपर दिए गए दिलचस्प पठन का परीक्षण किया है और वे मुट्ठी भर आम ब्राउज़रों में कैश्ड / अनछुए परीक्षणों के बीच विफल हो जाते हैं। यह उत्तर एक और के समान है, लेकिन एक है जिसे मैंने अभी कार्यान्वित और परीक्षण किया है, मैं इसकी पुष्टि कर सकता हूं: EdgeWin10, IE11Win8.1, Win7IE10, Win7IE9, iOS 10.2 Chrome, iOS 10.2 Safari, mac os 10.12 Chrome, mac os 10.12 सफारी, मैक ओएस 10.12 फ़ायरफ़ॉक्स, Google पिक्सेल 7.1, सैमसंग एस 5 एंड्रॉइड 4.4। AddEventListener / removeEventListener का भी उपयोग करना न भूलें: D
— danjah
13

imagesLoadedजावास्क्रिप्ट पुस्तकालय का उपयोग करें ।

सादे जावास्क्रिप्ट के साथ प्रयोग करने योग्य और एक jQuery प्लगइन के रूप में।

विशेषताएं:

साधन

— जोश हैरिसन
स्रोत
इसने मेरे लिए पूरी तरह से काम किया। function checkImages (imgs) {$ (imgs) .चेक (function () {$ (imgs) .imagesLoaded () .प्रोग्रेस (फंक्शन (उदाहरण, इमेज)) {if (image.isLoaded == false) /sole.log (छवि) .img.src + 'नहीं मिल सका।'); image.img.src = "/templates/img/no-image.jpg";}}};}); }
— Rooster242
1
ऐसा लगता है कि खुले मुद्दों का TON है जो प्रमुख कीड़े हैं, और डेवलपर को उनके साथ बहुत अधिक पकड़ नहीं लगती है। अब तक, यह उत्पादन वातावरण में पूरी तरह से अनुपयोगी है।
— vsync
3
@vsync क्या आपने कुछ खुले मुद्दों को पढ़ा है? वह उनमें से लगभग सभी का जवाब देता है, और सबसे अप्रतिष्ठेय किनारे-मामले प्रतीत होते हैं, जो कुछ अन्य लोगों से मुठभेड़ करते हैं। मुझे इसके उत्पादन में कभी कोई समस्या नहीं हुई।
— जोश हैरिसन
1
हाँ, मैं इसे स्वयं उपयोग करता हूं और कभी-कभी यह काम नहीं करता है, इसलिए मैं ऐसे मामलों को कवर करने के लिए एक सेटटाइमआउट का उपयोग करता हूं जहां यह विफल हो जाता है
— vsync
अच्छे कारण हैं कि कोई व्यक्ति इमेजस्लेबल्ड प्लगइन का उपयोग क्यों करना चाहता है: completeसंपत्ति स्पष्ट रूप से समर्थित नहीं लगती है: ब्राउज़र समर्थन के बारे में जानकारी का एक विश्वसनीय स्रोत खोजने में असमर्थ। completeसंपत्ति में भी स्पष्ट विनिर्देश नहीं हैं: एचटीएमएल 5 कल्पना केवल एक ही है जिसका उल्लेख है और यह अभी भी ड्राफ्ट संस्करण में है। यदि आप उपयोग करते हैं naturalWidthऔर naturalHeightकेवल IE9 + का समर्थन करते हैं, तो यदि आप यह पता लगाने के लिए इसका उपयोग करते हैं कि क्या छवि लोड है, तो आपको पुराने ब्राउज़र पर काम करने के लिए कुछ "चतुर" ट्रिक की आवश्यकता है, और आपको यह देखना होगा कि क्रॉस-ब्राउज़र व्यवहार सुसंगत है
— एड्रिन
8


Chrome और फ़ायरफ़ॉक्स
वर्किंग jsField पर काम कर रहे टेस्ट पर छवि तत्वों से प्राप्त जानकारी को पुनः प्राप्त करें (परिणाम देखने के लिए अपना कंसोल खोलें)

$('img').each(function(){ // selecting all image element on the page

    var img = new Image($(this)); // creating image element

    img.onload = function() { // trigger if the image was loaded
        console.log($(this).attr('src') + ' - done!');
    }

    img.onerror = function() { // trigger if the image wasn't loaded
        console.log($(this).attr('src') + ' - error!');
    }

    img.onAbort = function() { // trigger if the image load was abort
        console.log($(this).attr('src') + ' - abort!');
    }

    img.src = $(this).attr('src'); // pass src to image object

    // log image attributes
    console.log(img.src);
    console.log(img.width);
    console.log(img.height);
    console.log(img.complete);

});

नोट: मैंने jQuery का उपयोग किया है , मुझे लगा कि यह पूरी जावास्क्रिप्ट पर दर्द हो सकता है

मुझे यहाँ अच्छी जानकारी मिलती है OpenClassRoom -> यह एक फ्रेंच फोरम है

— Julha
स्रोत
3

रीयलटाइम नेटवर्क डिटेक्टर - पृष्ठ को रीफ्रेश किए बिना नेटवर्क स्थिति की जांच करें: (यह jquery नहीं है, लेकिन परीक्षण किया गया है, और 100% काम करता है: (फ़ायरफ़ॉक्स v25.0 पर परीक्षण किया गया)

कोड:

<script>
 function ImgLoad(myobj){
   var randomNum = Math.round(Math.random() * 10000);
   var oImg=new Image;
   oImg.src="YOUR_IMAGELINK"+"?rand="+randomNum;
   oImg.onload=function(){alert('Image succesfully loaded!')}
   oImg.onerror=function(){alert('No network connection or image is not available.')}
}
window.onload=ImgLoad();
</script>

<button id="reloadbtn" onclick="ImgLoad();">Again!</button>

यदि कनेक्शन खो गया है तो फिर से बटन दबाएं।

अपडेट 1: पेज को रिफ्रेश किए बिना ऑटो डिटेक्ट:

<script>
     function ImgLoad(myobj){
       var randomNum = Math.round(Math.random() * 10000);
       var oImg=new Image;
       oImg.src="YOUR_IMAGELINK"+"?rand="+randomNum;
       oImg.onload=function(){networkstatus_div.innerHTML="";}
       oImg.onerror=function(){networkstatus_div.innerHTML="Service is not available. Please check your Internet connection!";}
}

networkchecker = window.setInterval(function(){window.onload=ImgLoad()},1000);
</script>

<div id="networkstatus_div"></div>
— जेनी तमसे
स्रोत
100%! क्या होगा यदि आपकी छवि लिंक प्रॉक्सी / फ़ायरवॉल या छवि सर्वर द्वारा प्रतिक्रिया नहीं कर रही है? आपके पास अभी भी नेटवर्क काम कर रहा है :)
— सेन जैकब
यह हर छवि को एक बार फिर सर्वर से लोड करेगा, कैशे को काट देगा (जानबूझकर)। तो बस जाँच के लिए, आप (कम से कम) अपनी सभी छवियों के लिए बैंडविड्थ को दोगुना कर रहे हैं। इसके अलावा, यह केवल तभी जांचता है कि सर्वर पर छवि मौजूद है, न कि यह कि कुछ विशिष्ट स्थान पर लोड किया गया था। यह भी पता करने का कोई तरीका नहीं है कि प्रत्येक छवि कब भरी हुई है।
— मारियस बाल्किटिस
3

इस पृष्ठ पर दिलचस्प समाधान पढ़ने के बाद, मैंने SLak 'और नोयो के पोस्ट से अत्यधिक प्रभावित एक आसान-से-उपयोग वाला समाधान बनाया, जो क्रोम, IE, फ़ायरफ़ॉक्स, सफ़ारी और ओपेरा (सभी विंडोज़ पर)। इसके अलावा, यह एक iPhone / iPad के एमुलेटर पर मैंने काम किया।

इस समाधान और SLaks और Noyo के पोस्ट के बीच एक बड़ा अंतर यह है कि यह समाधान मुख्य रूप से naturalWidth और naturalHight गुण की जाँच करता है। मैंने पाया है कि वर्तमान ब्राउज़र संस्करणों में, वे दो गुण सबसे उपयोगी और सुसंगत परिणाम प्रदान करते हैं।

यह कोड TRUE लौटाता है जब एक छवि पूरी तरह से और सफलतापूर्वक लोड होती है। यह FALSE करता है जब एक छवि या तो पूरी तरह से लोड नहीं हुई है या लोड करने में विफल रही है।

एक बात जो आपको जाननी होगी, वह यह है कि यह फ़ंक्शन FALSE भी लौटाएगा यदि छवि 0x0 पिक्सेल छवि है। लेकिन वे चित्र काफी असामान्य हैं, और मैं एक बहुत ही उपयोगी मामले के बारे में नहीं सोच सकता, जहां आप यह देखना चाहते हैं कि क्या 0x0 पिक्सेल की छवि अभी तक भरी हुई है :)

पहले हम HTMLImageElement प्रोटोटाइप के लिए "isLoaded" नामक एक नया फ़ंक्शन संलग्न करते हैं, ताकि फ़ंक्शन का उपयोग किसी भी छवि तत्व पर किया जा सके।

HTMLImageElement.prototype.isLoaded = function() {

    // See if "naturalWidth" and "naturalHeight" properties are available.
    if (typeof this.naturalWidth == 'number' && typeof this.naturalHeight == 'number')
        return !(this.naturalWidth == 0 && this.naturalHeight == 0);

    // See if "complete" property is available.
    else if (typeof this.complete == 'boolean')
        return this.complete;

    // Fallback behavior: return TRUE.
    else
        return true;

};

फिर, किसी भी समय हमें छवि की लोडिंग स्थिति की जांच करने की आवश्यकता होती है, हम सिर्फ "आइसलोइड" फ़ंक्शन को कॉल करते हैं।

if (someImgElement.isLoaded()) {
    // YAY! The image loaded
}
else {
    // Image has not loaded yet
}

SLaks और Noyo की पोस्ट पर प्रति गॉर्जियस की टिप्पणी, यह समाधान शायद सफारी मोबाइल पर केवल एक बार की जांच के रूप में इस्तेमाल किया जा सकता है यदि आप एसआरसी विशेषता को बदलने की योजना बनाते हैं। लेकिन आप मौजूदा छवि तत्व पर SRC विशेषता को बदलने के बजाय एक नया SRC विशेषता के साथ एक छवि तत्व बनाकर उसके चारों ओर काम कर सकते हैं।

— डेटा-दान
स्रोत
2

यह है कि मैंने इसे ऊपर के तरीकों के संयोजन का उपयोग करके क्रॉस ब्राउज़र पर काम करने के लिए कैसे प्राप्त किया (मुझे भी डोम में गतिशील रूप से चित्र सम्मिलित करने की आवश्यकता है):

$('#domTarget').html('<img src="" />');

var url = '/some/image/path.png';

$('#domTarget img').load(function(){}).attr('src', url).error(function() {
    if ( isIE ) {
       var thisImg = this;
       setTimeout(function() {
          if ( ! thisImg.complete ) {
             $(thisImg).attr('src', '/web/css/img/picture-broken-url.png');
          }
       },250);
    } else {
       $(this).attr('src', '/web/css/img/picture-broken-url.png');
    }
});

नोट: आपको isIE वैरिएबल के लिए एक वैध बूलियन राज्य की आपूर्ति करने की आवश्यकता होगी।

— जस्टिन विन्सेंट
स्रोत
2 
var isImgLoaded = function(imgSelector){
  return $(imgSelector).prop("complete") && $(imgSelector).prop("naturalWidth") !== 0;
}

// या एक प्लगइन के रूप में

    $.fn.extend({
      isLoaded: function(){
        return this.prop("complete") && this.prop("naturalWidth") !== 0;
      }
    })

// $(".myImage").isLoaded()
— KhaledDev
स्रोत
1

जैसा कि मैं समझता हूं। अपूर्ण संपत्ति गैर-मानक है। यह सार्वभौमिक नहीं हो सकता है ... मुझे लगता है कि यह फ़ायरफ़ॉक्स छंद IE में अलग तरह से काम करता है। मैं जावास्क्रिप्ट में कई छवियों को लोड कर रहा हूँ फिर जाँच कर रहा हूँ कि क्या पूरा हुआ। फ़ायरफ़ॉक्स में, यह बहुत अच्छा काम करता है। IE में, यह इसलिए नहीं है क्योंकि चित्र किसी अन्य थ्रेड पर लोड हो रहे हैं। यह तभी काम करता है जब मैं अपने असाइनमेंट के बीच image.src में देरी करता हूं और जब मैं इमेज की पूर्ति करता हूं।

Image.onload और image.onerror का उपयोग करना मेरे लिए काम नहीं कर रहा है, या तो, क्योंकि मुझे यह जानने के लिए एक पैरामीटर पास करने की आवश्यकता है कि मैं किस छवि के बारे में बात कर रहा हूं जब फ़ंक्शन कहा जाता है। ऐसा करने का कोई भी तरीका विफल प्रतीत होता है क्योंकि यह वास्तव में एक ही फ़ंक्शन को पारित करने के लिए लगता है, एक ही फ़ंक्शन के अलग-अलग उदाहरण नहीं। इसलिए छवि को पहचानने के लिए मैं जो मान पास करता हूं वह हमेशा लूप में अंतिम मान होता है। मैं इस समस्या के आसपास किसी भी तरह से सोच भी नहीं सकता।

सफारी और क्रोम पर, मैं इमेज को पूरा कर रहा हूं। यह सच है और स्वाभाविक रूप से सेट तब भी होता है जब एरर कंसोल उस इमेज के लिए 404 दिखाता है ... और मैंने जानबूझकर इसे टेस्ट करने के लिए उस इमेज को हटा दिया। लेकिन ऊपर फ़ायरफ़ॉक्स और IE के लिए अच्छी तरह से काम करता है।

— user1018645
स्रोत
हम्म, यह दिलचस्प है। क्या मैं एक कोड उदाहरण पोस्ट करना चाहूंगा ताकि मैं कुछ चीजों को आज़माऊं?
— Xavi
1

कोड के इस स्निपेट ने मुझे ब्राउज़र कैशिंग समस्याओं को ठीक करने में मदद की:

$("#my_image").on('load', function() {

    console.log("image loaded correctly"); 
}).each(function() {

     if($(this).prop('complete')) $(this).load();
});

जब ब्राउज़र कैश अक्षम हो जाता है, तो केवल यह कोड काम नहीं करता है:

$("#my_image").on('load', function() {
     console.log("image loaded correctly"); 
})

यह काम करने के लिए आपको जोड़ना होगा:

.each(function() {
     if($(this).prop('complete')) $(this).load();
});
— फ्रैंक
स्रोत
0

इस JavaScriptकोड का उपयोग करके आप जांच सकते हैं कि छवि सफलतापूर्वक भरी हुई है या नहीं।

document.onready = function(e) {
        var imageobj = new Image();
        imageobj.src = document.getElementById('img-id').src;
        if(!imageobj.complete){ 
            alert(imageobj.src+"  -  Not Found");
        }
}

इसे आज़माएं

— अजय गुप्ता
स्रोत
0

मुझे एक छवि और EventListener के पूर्ण भार के साथ बहुत सारी समस्याएं थीं।

मैंने जो भी कोशिश की, परिणाम विश्वसनीय नहीं थे।

लेकिन तब मुझे इसका हल मिला। यह तकनीकी रूप से एक अच्छा नहीं है, लेकिन अब मेरे पास कभी भी एक असफल छवि भार नहीं था।

मैंने क्या किया:

                    document.getElementById(currentImgID).addEventListener("load", loadListener1);
                    document.getElementById(currentImgID).addEventListener("load", loadListener2);

                function loadListener1()
                    {
                    // Load again
                    }

                function loadListener2()
                {
                    var btn = document.getElementById("addForm_WithImage"); btn.disabled = false;
                    alert("Image loaded");
                }

छवि को एक बार लोड करने के बजाय, मैं इसे पहली बार के बाद दूसरी बार सीधे लोड करता हूं और दोनों ही इवेंट हैंडलर को रन करते हैं।

मेरे सारे सर दर्द दूर हो गए!

वैसे: स्टैकओवरफ्लो से आप लोगों ने पहले ही सौ से अधिक बार मेरी मदद की। इसके लिए एक बहुत बड़ा धन्यवाद!

— हॉर्सएडियो कूल
स्रोत
0

यह एक मेरे लिए ठीक काम :)

$('.progress-image').each(function(){
    var img = new Image();
    img.onload = function() {
        let imgSrc = $(this).attr('src');
        $('.progress-image').each(function(){
            if($(this).attr('src') == imgSrc){
                console.log($(this).parent().closest('.real-pack').parent().find('.shimmer').fadeOut())
            }
        })
    }
    img.src = $(this).attr('src');
});
— कन्नन उथमन
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.