image.onload घटना और ब्राउज़र कैश

Question

मैं एक छवि लोड होने के बाद एक अलर्ट बॉक्स बनाना चाहता हूं, लेकिन अगर छवि को ब्राउज़र कैश में सहेजा जाता है, तो .onloadघटना को निकाल नहीं दिया जाएगा।

जब छवि को कैश किया गया है या नहीं, इसकी परवाह किए बिना मैं एक चेतावनी को कैसे ट्रिगर करूं?

var img = new Image();
img.src = "img.jpg";
img.onload = function () {
   alert("image is loaded");
}

Comments

छवि लोड पर jQuery के कॉलबैक के

— Fabrício Matté

Answer 1

जैसा कि आप छवि को गतिशील रूप से उत्पन्न कर रहे हैं, onloadसे पहले संपत्ति सेट करें src।

var img = new Image();
img.onload = function () {
   alert("image is loaded");
}
img.src = "img.jpg";

Fiddle - नवीनतम फ़ायरफ़ॉक्स और क्रोम रिलीज़ पर परीक्षण किया गया।

आप इस पोस्ट में उत्तर का उपयोग भी कर सकते हैं , जिसे मैंने एक गतिशील रूप से उत्पन्न छवि के लिए अनुकूलित किया है:

var img = new Image();
// 'load' event
$(img).on('load', function() {
  alert("image is loaded");
});
img.src = "img.jpg";

बेला

Comments

रुको। आपका दूसरा कोड उदाहरण गलत काम क्यों करता है और .srcसेटिंग .onload से पहले सेट करता है? आपके पास पहले कोड उदाहरण में यह सही था, लेकिन दूसरे को गड़बड़ कर दिया। दूसरा आईई के कुछ संस्करणों में ठीक से काम नहीं करेगा।

— jfriend00

@ jfriend00 नहीं, गड़बड़ नहीं है। बैक अप कोड (दूसरा वाला) ठीक उसी स्थिति में है जब पहले वाला किसी तरह काम करना बंद कर देता है। =]यह .completeछवि को पहले से ही कैश होने की स्थिति में एक चेक का उपयोग करता है , इसलिए कोड इसे प्रदर्शित कर रहा था। बेशक, सर्वोत्तम अभ्यास के लिए, आप हमेशा srcसभी हैंडलर को बांधने के बाद सेट कर सकते हैं ।

— फबेरीसो मैटे

.completeइस मामले में भरोसा करने का सिर्फ कोई कारण नहीं है । बस अपने लोड हैंडलर को सेट करने से पहले सेट करें .srcऔर इसकी आवश्यकता है। मैंने एक स्लाइड शो लिखा है जो हर कल्पनीय ब्राउज़र में हजारों साइटों द्वारा उपयोग किया जाता है और हर बार पहली तकनीक काम करती है। .completeइस तरह से खरोंच से एक नई छवि बनाते समय कभी भी जांच करने की आवश्यकता नहीं है ।

— १२'२० बजे

ठीक है, सिर के लिए धन्यवाद, आपके तर्क को प्रतिबिंबित करने के लिए उत्तर को अपडेट किया =]। इसके अलावा @ jfriend00 अगर आप आईई में छवि लोड करता है तो क्या आप जांच सकते हैं? आश्चर्य है कि यह मेरे नेटवर्क के साथ या IE और छवि के साथ एक मुद्दा है।

— फबेरीसो मैटे

आज भी मैंने पाया है कि वेबकिट img.src = ''को नए src को असाइन करने से पहले ज़रूरत है अगर यह पहले इस्तेमाल किया गया था।

— quux

Answer 2

यदि src पहले से सेट है, तो इवेंट कैशेड मामले में फायरिंग कर रहा है, इससे पहले कि आप इवेंट हैंडलर को बाध्य करते हैं। तो, आप .completeभी बंद घटना आधारित ट्रिगर करना चाहिए ।

कोड नमूना:

$("img").one("load", function() {
   //do stuff
}).each(function() {
   if(this.complete || /*for IE 10-*/ $(this).height() > 0)
     $(this).load();
});

Answer 3

इस तरह की स्थितियों के लिए दो संभावित समाधान हैं:

1. इस पोस्ट पर सुझाए गए समाधान का उपयोग करें

2. srcब्राउज़र में इसे फिर से डाउनलोड करने के लिए मजबूर करने के लिए छवि में एक अद्वितीय प्रत्यय जोड़ें , जैसे:

   var img = new Image();
   img.src = "img.jpg?_="+(new Date().getTime());
   img.onload = function () {
       alert("image is loaded");
   }

इस कोड में हर बार वर्तमान टाइमस्टैम्प को छवि URL के अंत में जोड़कर आप इसे अद्वितीय बनाते हैं और ब्राउज़र छवि को फिर से डाउनलोड करेगा

Comments

यह सब हार कैशिंग है। यह इस समस्या को हल करने का गलत तरीका है। सही तरीका फैब्रिकियो के जवाब में है। मान सेट करने .onloadसे पहले बस हैंडलर सेट करें .srcऔर आप IE के कुछ संस्करणों में ऑनलोड घटना को याद नहीं करेंगे।

— jfriend00

हाँ आप सही हैं, लेकिन यह हमेशा कैश करने के लिए वांछनीय नहीं है, कभी-कभी छवियों को कैश नहीं किया जाना चाहिए। बेशक इस विशेष स्थिति में यह जरूरतों पर निर्भर करता है

— हाइपर

अपने कोणीय ऐप में मैंने वह सब कुछ आज़माया जो अन्य उत्तर कहते हैं, लेकिन मदद नहीं की। लेकिन इस जवाब को कैश न करने के लिए मजबूर करना मेरे लिए काम करता है। तो प्लस एक मुझसे।

— थानू

एकमात्र समाधान जिसने मेरे लिए नवीनतम संस्करण क्रोम में काम किया।

— युवा बॉब

Answer 4

मैं आज उसी मुद्दे पर मिला हूं। विभिन्न तरीकों की कोशिश करने के बाद, मुझे एहसास हुआ कि सिर्फ इश्यू के हिस्से के $(window).load(function() {})बजाय साइज़िंग का कोड डालें document.ready(यदि आप पेज को अजाक्स नहीं कर रहे हैं)।

Comments

यह उस स्थिति के लिए भी एक अच्छा उत्तर है जहां ब्राउज़र की छवि कैश की गई है, विंडो लोड के साथ ठीक काम करती है

— शॉकर

वास्तव में मैं इस मुद्दे का सामना कर रहा था। मेरी समस्या $(document).readyको $(window).loadहल करने के लिए बदल रहा है।

— तारिकुल इस्लाम

Answer 5

मैंने पाया कि आप इसे केवल Chrome में कर सकते हैं:

  $('.onload-fadein').each(function (k, v) {
    v.onload = function () {
        $(this).animate({opacity: 1}, 2000);
    };
    v.src = v.src;
});

.Src को स्वयं पर सेट करना ऑनलोड घटना को ट्रिगर करेगा।