एसिंक्रोनस रूप से छवियों को jQuery के साथ लोड करें

Question

मैं अपने पृष्ठ पर बाह्य छवियों को jQuery के उपयोग से लोड करना चाहता हूं और मैंने निम्नलिखित प्रयास किए हैं:

$.ajax({ 
   url: "http://somedomain.com/image.jpg", 
   timeout:5000,
   success: function() {

   },
   error: function(r,x) {

   }
});

लेकिन यह हमेशा त्रुटि देता है, क्या इस तरह से छवि लोड करना भी संभव है?

मैंने .loadविधि का उपयोग करने की कोशिश की और यह काम करता है लेकिन मुझे पता नहीं है कि अगर छवि उपलब्ध नहीं है (404) मैं टाइमआउट कैसे सेट कर सकता हूं। मैं यह कैसे कर सकता हूँ?

Comments

यह मेरे लिए काम करता है: stackoverflow.com/questions/6150289/…

— MrRhoads

Answer 1

अजाक्स की कोई जरूरत नहीं। आप एक नया छवि तत्व बना सकते हैं, इसका स्रोत विशेषता सेट कर सकते हैं और इसे लोड होने के बाद दस्तावेज़ में कहीं रख सकते हैं:

var img = $("<img />").attr('src', 'http://somedomain.com/image.jpg')
    .on('load', function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
            alert('broken image!');
        } else {
            $("#something").append(img);
        }
    });

Comments

टाइमआउट और 404 का क्या करें?

— Arief

इसके साथ टाइमआउट कैसे सेट करें? मैंने यह तरीका आजमाया लेकिन किसी तरह पेज अब भी इमेज लोड होने का इंतजार करता है।

— Arief

यदि आप अपने ब्राउज़र की समयरेखा की जाँच करते हैं, उदाहरण के लिए, Google Chrome के dev टूल टाइमलाइन, तो आप देखेंगे कि कोई भी DOM एलिमेंट (चाहे आप इसे DOM से अटैच करें या नहीं) जाहिरा तौर पर अप्रासंगिक है) और फिर इसका स्रोत सेट करना इसे वर्तमान डॉक्यूमेंट के लोड में जोड़ता है सूची - इसलिए पृष्ठ उस "लोडिंग" को पूरा नहीं करेगा जब तक कि बनाया गया तत्व लोड न हो जाए। आपका समाधान वास्तव में इस अर्थ में एक अतुल्य घटना नहीं है कि window.load () तब तक फायर नहीं करेगा जब तक कि छवि लोड नहीं हुई है, संभवतः कुछ निश्चित paintया layoutसंचालन को स्थगित कर रहा है, और निश्चित रूप से किसी भी onloadघटना पर निर्भरता में देरी कर रहा है ।

— टॉम ऑगर

@TomAuger: तो हम इसे वास्तव में अतुल्यकालिक कैसे बना सकते हैं? मैंने सिर्फ लोड के साथ कोड का परीक्षण किया () और यह अतुल्यकालिक नहीं है।

— बेसजेरो

@gidzior IE8 में काम नहीं करता क्योंकि आप IE8 में SRC विशेषता को jquery का उपयोग करके सेट नहीं कर सकते। यहाँ देखें: stackoverflow.com/questions/12107487/…

— रिच

Answer 2

यदि आप वास्तव में AJAX का उपयोग करने की आवश्यकता है ...

मैं यूसीस पर पहुंच गया, जहां ऑनलोड हैंडलर सही विकल्प नहीं थे। मेरे मामले में जब जावास्क्रिप्ट के माध्यम से मुद्रण। तो वास्तव में इसके लिए AJAX शैली का उपयोग करने के दो विकल्प हैं:

समाधान 1

Base64 छवि डेटा और एक REST छवि सेवा का उपयोग करें। यदि आपके पास अपना स्वयं का वेब सेवा है, तो आप एक JSP / PHP REST स्क्रिप्ट जोड़ सकते हैं जो Base64 एन्कोडिंग में चित्र प्रदान करती है। अब यह कैसे उपयोगी है? मुझे छवि एन्कोडिंग के लिए एक नया नया सिंटैक्स मिला:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhE..."/>

तो आप Ajax का उपयोग करके इमेज बेस 64 डेटा लोड कर सकते हैं और फिर पूरा होने पर आप इमेज में बेस 64 डेटा स्ट्रिंग का निर्माण कर सकते हैं! बहुत मज़ा :)। मैं इमेज इनकोडिंग के लिए इस साइट http://www.freeformatter.com/base64-encoder.html का उपयोग करने की सलाह देता हूं ।

$.ajax({ 
    url : 'BASE64_IMAGE_REST_URL', 
    processData : false,
}).always(function(b64data){
    $("#IMAGE_ID").attr("src", "data:image/png;base64,"+b64data);
});

Solution2:

अपने कैश का उपयोग करने के लिए ब्राउज़र को ट्रिक करें। यह आपको एक अच्छा फीका () देता है जब संसाधन कैश में होता है:

var url = 'IMAGE_URL';
$.ajax({ 
    url : url, 
    cache: true,
    processData : false,
}).always(function(){
    $("#IMAGE_ID").attr("src", url).fadeIn();
});   

हालांकि, दोनों विधियों में इसकी कमियां हैं: पहला केवल आधुनिक ब्राउज़रों पर काम करता है। दूसरे में प्रदर्शन ग्लिच हैं और यह अनुमान लगाने पर निर्भर करता है कि कैश का उपयोग कैसे किया जाएगा।

चीयर्स, होगा

Comments

यदि ब्राउज़र समर्थन की वर्तमान स्थिति आपके लिए स्वीकार्य है ( caniuse.com/#search=Blob ), तो आप डेटा URI के बजाय Blobs का उपयोग कर सकते हैं । यह बेस-इनकोडिंग डेटा यूआरआई का उपयोग करने की तुलना में कम हैकरी लगता है और यह मेमोरी की कम बर्बादी भी है (क्योंकि बेस 64 मेमोरी-कुशल प्रारूप नहीं है), हालांकि बाद वाला शायद वास्तविक दुनिया में ज्यादातर समय मायने नहीं रखता।

— मार्क अमेरी

Answer 3

JQuery का उपयोग करके आप "src" विशेषता को "data-src" में बदल सकते हैं। छवि लोड नहीं होगी। लेकिन टैग के साथ स्थान संग्रहीत है । जो मुझे पसंद है।

<img class="loadlater" data-src="path/to/image.ext"/>

JQuery का एक सरल टुकड़ा डेटा-src को src को कॉपी करता है, जो आपकी आवश्यकता होने पर छवि को लोड करना शुरू कर देगा। मेरे मामले में जब पेज लोड हो रहा है।

$(document).ready(function(){
    $(".loadlater").each(function(index, element){
        $(element).attr("src", $(element).attr("data-src"));
    });
});

मुझे यकीन है कि jQuery कोड संक्षिप्त किया जा सकता है, लेकिन यह इस तरह से समझा जा सकता है।

Comments

युक्ति: यदि आप data-टैग का उपयोग कर रहे हैं , तो $(element).data('src')इसके बजाय उनके माध्यम से एक्सेस करना बहुत आसान है$(element).attr('data-src')

— मैक्सिम कुम्पन

वास्तव में आज मैं jQuery का उपयोग नहीं करूंगा। लेकिन व्यक्तिगत स्वाद का सवाल है, और आप जिस वेबसाइट का निर्माण कर रहे हैं, उसके पैमाने पर निर्भर करता है। लेकिन उस समय का सबसे हॉट विषय "प्रोग्रेसिव इमेजेस" है, हो सकता है कि इसमें कुछ देखने लायक हो। smashingmagazine.com/2018/02/…

— htho

Answer 4

$(<img />).attr('src','http://somedomain.com/image.jpg');

अजाक्स से बेहतर होना चाहिए क्योंकि अगर इसकी गैलरी और आप पिक्स की सूची के माध्यम से लूप कर रहे हैं, अगर छवि पहले से कैश में है, तो यह सर्वर के लिए एक और अनुरोध नहीं भेजेगा। यह jQuery / ajax के मामले में अनुरोध करेगा और एक HTTP 304 (संशोधित नहीं) लौटाएगा और यदि पहले से ही है तो कैश से मूल छवि का उपयोग करें। उपरोक्त विधि गैलरी में छवियों के पहले लूप के बाद सर्वर के लिए एक खाली अनुरोध कम कर देता है।

Answer 5

आप ASYNC लोडिंग के लिए एक आस्थगित ऑब्जेक्ट का उपयोग कर सकते हैं।

function load_img_async(source) {
    return $.Deferred (function (task) {
        var image = new Image();
        image.onload = function () {task.resolve(image);}
        image.onerror = function () {task.reject();}
        image.src=source;
    }).promise();
}

$.when(load_img_async(IMAGE_URL)).done(function (image) {
    $(#id).empty().append(image);
});

कृपया ध्यान दें: कैश के साथ समस्याओं को रोकने के लिए image.onload image.src से पहले होना चाहिए।

Answer 6

यदि आप केवल उस छवि का स्रोत सेट करना चाहते हैं जिसका आप उपयोग कर सकते हैं।

$("img").attr('src','http://somedomain.com/image.jpg');

Answer 7

यह भी काम करता है ।।

var image = new Image();
image.src = 'image url';
image.onload = function(e){
  // functionalities on load
}
$("#img-container").append(image);

Answer 8

AFAIK आपको .ajax () के रूप में यहाँ एक .load () फ़ंक्शन करना होगा, लेकिन आप इसे लाइव (ish) रखने के लिए jQuery सेटटाइमआउट का उपयोग कर सकते हैं

<script>
 $(document).ready(function() {
 $.ajaxSetup({
    cache: false
});
 $("#placeholder").load("PATH TO IMAGE");
   var refreshId = setInterval(function() {
      $("#placeholder").load("PATH TO IMAGE");
   }, 500);
});
</script>

Comments

क्षमा करें, मैंने आपके Q को थोड़ा गलत समझा, मुझे लगा कि आप ऐसे चित्र लोड कर रहे हैं जो बदल रहे थे या कुछ (इसलिए ajax bit)

— benhowdle89

Answer 9

अपनी छवि लोड करने के लिए .लोड का उपयोग करें। परीक्षण करने के लिए यदि आपको कोई त्रुटि मिलती है (मान लें कि 404) आप निम्न कार्य कर सकते हैं:

$("#img_id").error(function(){
  //$(this).hide();
  //alert("img not loaded");
  //some action you whant here
});

सावधान - .error () ईवेंट तब ट्रिगर नहीं होगा जब किसी छवि के लिए src विशेषता खाली हो।

Answer 10

$ (फ़ंक्शन () {

    if ($('#hdnFromGLMS')[0].value == 'MB9262') {
        $('.clr').append('<img src="~/Images/CDAB_london.jpg">');
    }
    else
    {
        $('.clr').css("display", "none");
        $('#imgIreland').css("display", "block");
        $('.clrIrland').append('<img src="~/Images/Ireland-v1.jpg">');
    }
});

Comments

इसका सही तरीके से काम करते हुए, होम पेज लोड करते समय हम अलग-अलग चित्र सेट कर सकते हैं - पोलारिस से

— माधवलाथा बथिनी

बहुत ज्यादा अव्यवस्था, सवाल का जवाब देने के लिए असंबंधित।

— मैक्सिम कुम्पन