छवियों को लोड करने के लिए jQuery घटना

Question

क्या यह पता लगाना संभव है कि जब सभी चित्र jQuery इवेंट के माध्यम से लोड किए गए हों?

आदर्श रूप में, एक होना चाहिए

$(document).idle(function()
{
}

या

$(document).contentLoaded(function()
{
}

लेकिन मैं ऐसी बात नहीं कर सकता।

मैंने इस तरह एक घटना को संलग्न करने के बारे में सोचा:

$(document).ready(function()
{
    var imageTotal = $('img').length;
    var imageCount = 0;        
    $('img').load(function(){if(++imageCount == imageTotal) doStuff();});
}

लेकिन क्या यह टूट जाएगा अगर कोई छवि लोड करने में विफल रहती है? यह विधि के लिए गंभीर रूप से महत्वपूर्ण है जिसे कहा जाता है, और सही समय पर।

Comments

आप ओनलोड घटना का उपयोग क्यों नहीं करते: $ (विंडो) .लोड (डस्टफ़)? हालाँकि, Onload अन्य संसाधनों के लिए भी प्रतीक्षा करेगा (जैसे स्क्रिप्ट, स्टाइलशीट और फ़्लैश) और न केवल चित्र, जो आपके लिए ठीक हो सकते हैं या नहीं भी।

— मई'09

अपने सभी img टैग में लोड ईवेंट संलग्न करना, जैसा कि आपके कोड नमूने में है, कार्यात्मक होना चाहिए। यदि कोई चित्र doStuff लोड करने में विफल रहता है () नहीं कहा जाएगा, लेकिन यह उचित लगता है कि आपकी आवश्यकता को देखते हुए सभी छवियों को लोड किया जाना चाहिए।

— स्टीव गुडमैन

। JQuery 1.8 के बाद से .load () विधि को हटा दिया गया है। इसे देखें: stackoverflow.com/questions/3877027/…

— fiorix

Answer 1

JQuery के प्रलेखन के अनुसार , छवियों के साथ लोड ईवेंट का उपयोग करने के लिए कई कैविएट हैं। जैसा कि एक अन्य जवाब में कहा गया है, ahpi.imgload.js प्लगइन टूट गया है, लेकिन लिंक किए गए पॉल आयरिश जीस्ट को अब बनाए नहीं रखा गया है।

पॉल आयरिश प्रति, छवि लोड पूर्ण घटनाओं का पता लगाने के लिए विहित प्लगइन अब यहां है:

https://github.com/desandro/imagesloaded

Comments

यह उत्तर है- एकाधिक चित्र, कैश्ड चित्र, ब्राउज़र क्विर्क, टूटी हुई छवियां और यह वर्तमान है। सुंदर।

— यारिन

आज इसका परीक्षण किया। 2 मिनट में उठ गया था।

— कोडटॉड

@ यारिन, अच्छा प्रलेखन, प्रयोग करने में आसान, एकाधिक, कैश्ड, टूटा हुआ, और वर्तमान से सहमत हैं। इसे प्यार करना।

— जॉन्थप्रन्योर जुएल

नकारात्मक पक्ष पर, हालाँकि, इमेजलेबेड IE7 का समर्थन नहीं करता है यदि यह आपके लिए महत्वपूर्ण है।

— जॉन्थप्रन्योर

एक त्वरित और सरल 2-लाइन फिक्स IE7 पर छवियों को काम करने के लिए ।

— जॉन्थप्रन्योर

Answer 2

यदि आप सभी छवियों के लिए जाँच करना चाहते हैं, लेकिन एक विशिष्ट (जैसे। एक छवि जिसे आपने DOM के पूरा होने के बाद गतिशील रूप से बदल दिया है) आप इसका उपयोग कर सकते हैं:

$('#myImage').attr('src', 'image.jpg').on("load", function() {  
  alert('Image Loaded');  
});  

Comments

सावधान रहें, क्योंकि load()जब कोई छवि पहले से लोड नहीं है, तो ट्रिगर नहीं होगा। यह आसानी से हो सकता है जब उपयोगकर्ता के ब्राउज़र कैश में कोई छवि होती है। आप जांच कर सकते हैं कि क्या कोई छवि पहले से लोड की गई है $('#myImage').prop('complete'), जो किसी छवि के लोड होने पर वापस आती है।

— ब्लेज

जब यह क) के पास अपने प्रश्न का उत्तर नहीं देता है तो इसके पास इतने वोट क्यों होते हैं और बी) इसके अलावा एक खराब समाधान देता है? (Meanshile सही उत्तर @ johnpolacek की है और 1 मत होता है)

— Yarin

चेतावनी !!!!!!!!!!!!!!! यह सही उत्तर नहीं है। johnpolacek का सही उत्तर है। कृपया उसका जवाब दें।

— mrbinky3000

ये आपत्तियाँ अब किसी विशेष परिस्थिति में छोड़कर प्रासंगिक प्रतीत नहीं होती हैं: जब आप किसी छवि के src को पहले जैसे ही src में बदलते हैं। उन छवियों के लिए, जिन्हें आपने केवल DOM, $ (...) में जोड़ा है। लोड () पर्याप्त होना चाहिए। वर्तमान एफएफ और क्रोम में परीक्षण किया गया, और IE6-9: jsfiddle.net/b9chris/tXVCe/2

— क्रिस मोशिनिनी

+1 ठीक काम करता है (जब आप जानते हैं कि) छवि ब्राउज़र कैश में नहीं है।

— लोड

Answer 3

आप इसे संभालने के लिए मेरे प्लगइन waForImages का उपयोग कर सकते हैं ...

$(document).waitForImages(function() {
   // Loaded.
});

इसका लाभ यह है कि आप इसे एक पूर्वज तत्व में स्थानीय कर सकते हैं और यह वैकल्पिक रूप से CSS में संदर्भित छवियों का पता लगा सकता है ।

यह सिर्फ हिमशैल का टिप है, हालांकि, अधिक कार्यक्षमता के लिए प्रलेखन की जांच करें ।

Comments

हाय एलेक्स, होनहार लग रहा है। लेकिन जॉनपोलैस्क और हिरिसोव द्वारा दिए गए उत्तरों और टिप्पणियों में उल्लिखित की तरह, क्या यह मामला कवर करता है जब छवि पहले से ही ब्राउज़र कैश में है?

— सेक्सीबीट

मेरे पास एक ऐसी प्रक्रिया है जो एक छवि बनाती है और पृष्ठ के पहले ही लोड होने के बाद इसे गतिशील रूप से लोड करती है, और उपयोगकर्ता को इंतजार करते समय मुझे एक अजाक्स लोडर दिखाने की आवश्यकता होती है। यह प्लगइन उस उपयोग के मामले के लिए पूरी तरह से काम करता है। हालाँकि आपको img src प्रॉपर्टी सेट करने के बाद फंक्शन को कॉल करना होगा!

— जॉन लिवरमोर

Answer 4

IMG इवेंट हैंडलर के रूप में jQuery $ () लोड () का उपयोग की गारंटी नहीं है। यदि छवि कैश से लोड होती है, तो कुछ ब्राउज़र घटना को बंद नहीं कर सकते हैं। सफारी के (पुराने?) संस्करणों के मामले में, यदि आपने IMG तत्व के SRC गुण को समान मान में बदल दिया , तो ऑनलोड घटना में आग नहीं लगेगी।

ऐसा प्रतीत होता है कि यह नवीनतम jQuery (1.4.x) - http://api.jquery.com/load-event - उद्धरण में मान्यता प्राप्त है :

यह संभव है कि अगर ब्राउजर कैश से छवि लोड की जाती है तो लोड ईवेंट ट्रिगर नहीं होगा। इस संभावना को ध्यान में रखते हुए, हम एक विशेष लोड घटना का उपयोग कर सकते हैं जो छवि तैयार होने पर तुरंत फायर करती है। event.special.load वर्तमान में एक प्लगइन के रूप में उपलब्ध है।

इस मामले को पहचानने के लिए अब एक प्लग-इन है और IMG तत्व लोड स्थितियों के लिए IE की "पूर्ण" संपत्ति: http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

Answer 5

इस उत्तर के अनुसार , आप इसके बजाय ऑब्जेक्ट पर jQuery लोड इवेंट का उपयोग कर सकते हैं :windowdocument

jQuery(window).load(function() {
    console.log("page finished loading now.");
});

पृष्ठ पर सभी सामग्री लोड होने के बाद यह चालू हो जाएगा। यह अलग है jQuery(document).load(...)जिससे डोम लोडिंग समाप्त होने के बाद चालू हो जाता है।

Comments

यही वह है जिसकी तलाश में मैं हूं!

— एरिक के

Answer 6

imagesLaded प्लगइन जाने के लिए रास्ता है, अगर आपको एक क्रॉसब्रोसर समाधान की आवश्यकता है

 $("<img>", {src: 'image.jpg'}).imagesLoaded( function( $images, $proper, $broken ){
 if($broken.length > 0){
 //Error CallBack
 console.log('Error');
 }
 else{
 // Load CallBack
 console.log('Load');
 }
 });

अगर तुम सिर्फ एक IE WorkAround की जरूरत है, यह करेंगे

 var img = $("<img>", {
    error: function() {console.log('error'); },
    load: function() {console.log('load');}
    });
  img.attr('src','image.jpg');

Answer 7

इस समय ahpi.imgload.js प्लगइन पर एक नोट है, जिसमें कहा गया है कि यह वर्तमान में टूटा हुआ है, और इसके बजाय इस लाभ को आज़माने के लिए: https://gist.github.com/797120/7176db676f1e0e20d7c23933f9fc655c2f120c58c58

Answer 8

समान-मूल छवियों के लिए, आप उपयोग कर सकते हैं:

$.get('http://www.your_domain.com/image.jpg', imgLoaded);

function imgLoaded(){
    console.log(this, 'loaded');
}

Answer 9

शायद यह प्लगइन उपयोगी हो सकता है: http://www.farinspace.com/jquery-image-preload-plugin/

Answer 10

  function CheckImageLoadingState()
  {
     var counter = 0;
     var length = 0;

     jQuery('#siteContent img').each(function() 
     {
        if(jQuery(this).attr('src').match(/(gif|png|jpg|jpeg)$/))
          length++;
     });

     jQuery('#siteContent img').each(function() 
     {  
        if(jQuery(this).attr('src').match(/(gif|png|jpg|jpeg)$/))
        {
           jQuery(this).load(function() 
           {
           }).each(function() {
              if(this.complete) jQuery(this).load();
            });
        }
        jQuery(this).load(function()
        {
           counter++;
           if(counter === length) 
           {  
              //function to call when all the images have been loaded
              DisplaySiteContent();
           }
        });
     });
  }

Answer 11

$( "img.photo" ).load(function() {

    $(".parrentDiv").css('height',$("img.photo").height());
    // very simple

}); 

Answer 12

मैंने अपनी स्क्रिप्ट बनाई, क्योंकि मुझे बहुत सारे ब्लॉट्स मिलते थे, और मैं बस यही चाहता था कि मैं जिस तरह से काम करूं। मेरा यह देखने के लिए जाँचता है कि क्या प्रत्येक छवि की ऊँचाई (मूल छवि ऊँचाई) है। मैंने जोड़ दिया है कि कैशिंग के मुद्दों को प्राप्त करने के लिए $ (विंडो) .load () फ़ंक्शन के साथ।

मैंने कोड को काफी जोर से टिप्पणी की है, इसलिए इसे देखना दिलचस्प होना चाहिए, भले ही आप इसका उपयोग न करें। यह मेरे लिए पूरी तरह से काम करता है।

आगे की हलचल के बिना, यह है:

imgLoad.js स्क्रिप्ट

Answer 13

लोड करने के लिए सभी छवियों की प्रतीक्षा कर
रहा है ... मुझे अपनी समस्या jw00 के साथ awser मिली jquery: एक कंटेनर div की छवि भरी हुई घटना को कैसे सुनें? .. और "अगर (यह.कॉम)"
सभी चीज़ों को लोड करने के लिए प्रतीक्षा कर रहा है और संभवतः कुछ कैश में है! .. और मैंने "त्रुटि" घटना को जोड़ा है ... यह सभी ब्राउज़रों में मजबूत है

$(function() { // Wait dom ready
    var $img = $('img'), // images collection
        totalImg = $img.length,
        waitImgDone = function() {
            totalImg--;
            if (!totalImg) {
                console.log($img.length+" image(s) chargée(s) !");
            }
        };
    $img.each(function() {
        if (this.complete) waitImgDone(); // already here..
        else $(this).load(waitImgDone).error(waitImgDone); // completed...
    });
});

डेमो: http://jsfiddle.net/molokoloco/NWjDb/

Answer 14

window.load = function(){}

इसका पूरी तरह से सभी ब्राउज़रों द्वारा समर्थित है, और यह एक घटना को आग लगा देगा जब सभी चित्र पूरी तरह से लोड हो जाएंगे।

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

Comments

निश्चित रूप से window.onload = function () {}

— teknopaul