आधिकारिक तरीका पूछने के लिए jQuery कुछ करने से पहले लोड करने के लिए सभी छवियों के लिए प्रतीक्षा करें

640

JQuery में जब आप ऐसा करते हैं:

$(function() {
   alert("DOM is loaded, but images not necessarily all loaded");
});

यह आपके कोड को लोड करने और निष्पादित करने के लिए DOM का इंतजार करता है। यदि सभी चित्र लोड नहीं हैं, तो यह अभी भी कोड निष्पादित करता है। यह स्पष्ट रूप से है कि हम क्या चाहते हैं यदि हम किसी भी डोम सामान को दिखा रहे हैं जैसे कि तत्वों को दिखाना या छिपाना या घटनाओं को संलग्न करना।

मान लीजिए कि मैं कुछ एनीमेशन चाहता हूं और मैं इसे तब तक नहीं चलाना चाहता जब तक कि सभी चित्र लोड नहीं हो जाते। क्या ऐसा करने के लिए jQuery में कोई आधिकारिक तरीका है?

मेरे पास सबसे अच्छा तरीका उपयोग करना है <body onload="finished()">, लेकिन मैं वास्तव में ऐसा नहीं करना चाहता जब तक कि मेरे पास नहीं है।

नोट: इंटरनेट एक्सप्लोरर में jQuery 1.3.1 में एक बग है जो वास्तव में कोड को निष्पादित करने से पहले लोड करने के लिए सभी छवियों का इंतजार करता है $function() { }। इसलिए यदि आप उस प्लेटफॉर्म का उपयोग कर रहे हैं, तो आपको वह व्यवहार मिलेगा जो मैं ऊपर वर्णित सही व्यवहार के बजाय देख रहा हूं।

jquery 
— Simon_Weaver
स्रोत
3
काम नहीं $("img").load()करता है?
— लुकास
1
मुझे लगता है कि यह ध्यान देने योग्य है कि यदि आप आयाम विशेषताओं को सेट करते हैं, तो आप तैयार फ़ंक्शन में कुछ कोड को सुरक्षित रूप से निष्पादित करते हैं जो उन आयामों पर भरोसा करते हैं। Php के साथ आप उन्हें php.net/manual/en/function.getimagesize.php के साथ db में या ब्राउजर में आउटपुट से पहले स्टोर करने के लिए अपलोड कर सकते हैं ।
— अलकिन
यदि आप कुछ एक अविश्वसनीय काम कर चाहते हैं, तो बहुत अच्छी और लोकप्रिय imagesLoaded जावास्क्रिप्ट नीचे इस सवाल का जवाब में बताया गया पुस्तकालय की जाँच stackoverflow.com/a/26458347/759452
— एड्रियन रहो
"यहाँ मैं एक आधिकारिक तरीके के अलावा कुछ भी खोजने आया था।"
— लियोन पेलेटियर

जवाबों:

1034

JQuery के साथ, आप $(document).ready()जब कुछ निष्पादित करने के लिए डोम भरी हुई है और $(window).on("load", handler)कुछ पर अमल करने जब सभी अन्य बातों के इस तरह के चित्र के रूप में रूप में अच्छी तरह लोड किए गए हैं,।

अंतर को निम्न पूर्ण HTML फ़ाइल में देखा जा सकता है, बशर्ते आपके पास jollyrogerJPEG फाइलें (या अन्य उपयुक्त) हों:

<html>
    <head>
        <script src="jquery-1.7.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                alert ("done");
            });
        </script>
    </head><body>
        Hello
        <img src="jollyroger00.jpg">
        <img src="jollyroger01.jpg">
        // : 100 copies of this
        <img src="jollyroger99.jpg">
    </body>
</html>

उसके साथ, अलर्ट बॉक्स छवियों के लोड होने से पहले दिखाई देता है, क्योंकि उस बिंदु पर डोम तैयार है। यदि आप बदलते हैं:

$(document).ready(function() {

में:

$(window).on("load", function() {

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

इसलिए, जब तक पूरा पृष्ठ तैयार न हो जाए, तब तक प्रतीक्षा करने के लिए आप कुछ का उपयोग कर सकते हैं:

$(window).on("load", function() {
    // weave your magic here.
});
— paxdiablo
स्रोत
32
स्मैक माथे +1 पूरी तरह से भूल गए। $ (विंडो) .लोड () तब तक फायर नहीं करेगी जब तक कि चित्र नहीं बन जाते।
— पाओलो बरगीनो
10
मैंने वैसा ही किया है। यहां तक ​​कि, एक उत्तर के माध्यम से पढ़ना यह नहीं जानता कि यह मैं था और अभी भी इसे नहीं समझ रहा हूं।
— रिमियान
24
बस एक नोट - यह क्रोमियम के तहत काम नहीं करता है (और मैं क्रोम को मानता हूं)। $ (विंडो)। पहले से मौजूद घटना $ (दस्तावेज़) के रूप में ही आग लगती है। पहले से ही - छवियों के पूरा होने से पहले।
— नाथन क्रूस
24
लेकिन यह $ (विंडो) है। लोड (फ़ंक्शन ())
— TJ-
3
@KyorCode क्या आपको यकीन है कि यह सिर्फ इसलिए नहीं है क्योंकि IE में चित्र कैश किए गए थे? यदि ऐसा होता है, तो वे "लोड" घटना को बिल्कुल भी आग नहीं देंगे। यह आलेख इस समस्या को हल करने में मदद करता है।
— जेमी बार्कर
157

मैंने एक प्लगइन लिखा है जो कॉलबैक को आग दे सकता है जब छवियों को तत्वों में लोड किया गया है, या लोड की गई छवि के अनुसार एक बार आग।

यह समान है $(window).load(function() { .. }), सिवाय इसके कि आप किसी भी चयनकर्ता को जांचने के लिए परिभाषित कर सकते हैं। यदि आप केवल यह जानना चाहते हैं कि कब #content(उदाहरण के लिए) सभी चित्र लोड किए गए हैं, तो यह आपके लिए प्लगइन है।

यह भी सीएसएस में संदर्भित छवियों, जैसे की लोडिंग का समर्थन करता है background-image, list-style-imageआदि

WaitForImages jQuery प्लगइन

उदाहरण उपयोग

$('selector').waitForImages(function() {
    alert('All images are loaded.');
});

JsFiddle पर उदाहरण ।

अधिक प्रलेखन GitHub पृष्ठ पर उपलब्ध है।

— एलेक्स
स्रोत
1
धन्यवाद!! $ .लोड () मेरे लिए काम नहीं कर रहा था, लेकिन यह पूरी तरह से चाल है।
— फ्रेक्स्टिल सेप
मैं Chrome संस्करण 22.0.1229.94 और इस प्लगइन का उपयोग करता हूं, और मैंने waFormImages के भीतर लोड की गई छवियों से ऑफ़सेट पढ़ने की कोशिश की: ('img selector').each(function(index) { var offset = $(this).offset(); ...});हालाँकि, ऑफसेट.टॉप अभी भी शून्य है। क्यों?
— बेसजेरो
1
@basZero अधिक संदर्भ के बिना बताना मुश्किल है। कृपया पर एक मुद्दे को उठाने के मुद्दे पेज।
— एलेक्स
जब चित्र cahced हैं, तो यह मेरे लिए काम नहीं कर रहा है। क्या किसी भी 1 के लिए एक समाधान है?
— मंदीप जैन
2
इसका मूल रूप से imagesLaded के अनुरूप है, लेकिन यह srcsets के साथ भी काम करता है। ठीक वही जो मेरे द्वारा खोजा जा रहा था! महान प्लगइन!
— फेबियन शॉनर
48

$(window).load()पहली बार पृष्ठ लोड होने पर ही काम करेगा। यदि आप गतिशील सामान कर रहे हैं (उदाहरण: बटन पर क्लिक करें, लोड करने के लिए कुछ नई छवियों की प्रतीक्षा करें), तो यह काम नहीं करेगा। इसे प्राप्त करने के लिए, आप मेरे प्लगइन का उपयोग कर सकते हैं:

डेमो

डाउनलोड

/**
 *  Plugin which is applied on a list of img objects and calls
 *  the specified callback function, only when all of them are loaded (or errored).
 *  @author:  H. Yankov (hristo.yankov at gmail dot com)
 *  @version: 1.0.0 (Feb/22/2010)
 *  http://yankov.us
 */

(function($) {
$.fn.batchImageLoad = function(options) {
    var images = $(this);
    var originalTotalImagesCount = images.size();
    var totalImagesCount = originalTotalImagesCount;
    var elementsLoaded = 0;

    // Init
    $.fn.batchImageLoad.defaults = {
        loadingCompleteCallback: null, 
        imageLoadedCallback: null
    }
    var opts = $.extend({}, $.fn.batchImageLoad.defaults, options);

    // Start
    images.each(function() {
        // The image has already been loaded (cached)
        if ($(this)[0].complete) {
            totalImagesCount--;
            if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);
        // The image is loading, so attach the listener
        } else {
            $(this).load(function() {
                elementsLoaded++;

                if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);

                // An image has been loaded
                if (elementsLoaded >= totalImagesCount)
                    if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
            });
            $(this).error(function() {
                elementsLoaded++;

                if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);

                // The image has errored
                if (elementsLoaded >= totalImagesCount)
                    if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
            });
        }
    });

    // There are no unloaded images
    if (totalImagesCount <= 0)
        if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
};
})(jQuery);
— रोको सी। बुल्जन
स्रोत
बस किसी को भी BatchImagesLoad प्लगइन के लिए एक उदाहरण उदाहरण की आवश्यकता है: yankov.us/batchImageLoad
— जोनाथन Marzullo
1
मेरा मतलब है कि कोई अनादर नहीं है, लेकिन कोई भी आपके प्लगइन की विश्वसनीयता के बारे में आपके शब्द पर "बस" भरोसा नहीं कर सकता है। जैसा कि Yevgeniy Afanasyevउत्तर में उल्लेख किया गया है , इमेजलेबेड इस पर बहुत बेहतर काम करता है और आपके द्वारा उल्लिखित उपयोग के मामले को कई अन्य कोने के मामलों के साथ कवर करता है (हल किए गए गितुब मुद्दों को देखें) ।
— बी
19

उन लोगों के लिए जो $(window).loadआग के बाद अनुरोधित होने वाली एकल छवि के डाउनलोड पूरा होने के बारे में सूचित करना चाहते हैं , आप छवि तत्व की loadघटना का उपयोग कर सकते हैं ।

उदाहरण के लिए:

// create a dialog box with an embedded image
var $dialog = $("<div><img src='" + img_url + "' /></div>");

// get the image element (as a jQuery object)
var $imgElement = $dialog.find("img");

// wait for the image to load 
$imgElement.load(function() {
    alert("The image has loaded; width: " + $imgElement.width() + "px");
});
— डान पासारो
स्रोत
13

अब तक के किसी भी उत्तर ने ऐसा नहीं दिया है जो सबसे सरल समाधान लगता है।

$('#image_id').load(
  function () {
    //code here
});
— coz
स्रोत
इसके बारे में क्या अच्छा है कि आप इसे लोड करते ही व्यक्तिगत छवियों के लिए ट्रिगर करने के लिए प्राप्त कर सकते हैं।
— शीर्ष बिल्ली
6

मैं imagesLoaded.jsजावास्क्रिप्ट पुस्तकालय का उपयोग करने की सलाह दूंगा।

क्यों नहीं jQuery का उपयोग करें $(window).load()?

जैसा कि /programming/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load/26929951

यह स्कोप की बात है। imagesLoaded आपको छवियों के एक सेट को लक्षित करने की अनुमति देती है, जबकि $(window).load()सभी परिसंपत्तियों को लक्षित करती है - सभी छवियों, वस्तुओं, .js और .css फ़ाइलों और यहां तक ​​कि iframes सहित। सबसे अधिक संभावना है, इमेजस्लेबेड जल्द ही ट्रिगर करेगा $(window).load()क्योंकि यह परिसंपत्तियों के एक छोटे समूह को लक्षित कर रहा है।

छवियों का उपयोग करने के लिए अन्य अच्छे कारण

  • आधिकारिक तौर पर IE8 + द्वारा समर्थित है
  • लाइसेंस: एमआईटी लाइसेंस
  • निर्भरता: कोई नहीं
  • वजन (छोटा और gzipped): 7kb (हल्का!)
  • डाउनलोड बिल्डर (वजन घटाने में मदद करता है): कोई ज़रूरत नहीं है, पहले से ही छोटे
  • गीथुब पर: हाँ
  • समुदाय और योगदानकर्ता: बहुत बड़ा, 4000+ सदस्य, हालांकि केवल 13 योगदानकर्ता
  • इतिहास और योगदान: अपेक्षाकृत पुराना (2010 से) लेकिन फिर भी सक्रिय परियोजना

साधन

— एड्रिएन बे
स्रोत
4

JQuery के साथ मैं इस के साथ आते हैं ...

$(function() {
    var $img = $('img'),
        totalImg = $img.length;

    var waitImgDone = function() {
        totalImg--;
        if (!totalImg) alert("Images loaded!");
    };

    $('img').each(function() {
        $(this)
            .load(waitImgDone)
            .error(waitImgDone);
    });
});

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

— molokoloco
स्रोत
मुझे पता चला कि यह ठीक से काम नहीं करेगा यदि ब्राउज़र छवि के लिए 304 Not Mofified प्रतिक्रिया देता है जिसका अर्थ है कि छवि कैश की गई है।
— जॉनीफ्री
1

छवियों का उपयोग करें पैकेज्ड v3.1.8 (6.8 Kb जब कम से कम)। यह अपेक्षाकृत पुराना है (2010 से) लेकिन अभी भी सक्रिय परियोजना है।

आप इसे github: https://github.com/desandro/imagesloaded पर पा सकते हैं

उनकी आधिकारिक साइट: http://imagesloaded.desandro.com/

यह उपयोग करने से बेहतर क्यों है: 

$(window).load()

क्योंकि आप छवियों को गतिशील रूप से लोड करना चाह सकते हैं, जैसे: jsfiddle

$('#button').click(function(){
    $('#image').attr('src', '...');
});
— येवगेनी अफानसयेव
स्रोत
1
वास्तव में, इमेज लोड किया गया src विशेषता मान क्रॉस ब्राउज़र के परिवर्तन का समर्थन नहीं करता है। आपको हर बार एक नया छवि तत्व बनाना होगा। फ़ायरफ़ॉक्स पर इसे आज़माएं और आपको समस्या दिखाई देगी।
— बी
अच्छी बात है, मैंने अभी तक केवल Google क्रोम और IE-11 पर परीक्षण किया है। यह काम कर रहा था। धन्यवाद।
— येवगेनी अफानसेयेव
मैंने अपने प्रश्न stackoverflow.com/q/26927575 में इस क्रॉस-ब्राउज़र मुद्दे को "चित्र के साथ क्या नहीं कर सकता है" जोड़ दिया है, चित्र देखें Github github.com/desandro/imagesinded/issues/121
— Adrien
1

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

var counter = 0;
var size = $('img').length;

$("img").load(function() { // many or just one image(w) inside body or any other container
    counter += 1;
    counter === size && $('body').css('background-color', '#fffaaa'); // any action
}).each(function() {
  this.complete && $(this).load();        
});
— मारियो मेड्रानो
स्रोत
0

मेरा समाधान मोलोकोलोको के समान है । JQuery फ़ंक्शन के रूप में लिखा गया है:

$.fn.waitForImages = function (callback) {
    var $img = $('img', this),
        totalImg = $img.length;

    var waitImgLoad = function () {
        totalImg--;
        if (!totalImg) {
            callback();
        }
    };

    $img.each(function () {
        if (this.complete) { 
            waitImgLoad();
        }
    })

    $img.load(waitImgLoad)
        .error(waitImgLoad);
};

उदाहरण:

<div>
    <img src="img1.png"/>
    <img src="img2.png"/>
</div>
<script>
    $('div').waitForImages(function () {
        console.log('img loaded');
    });
</script>
— Mariusz Charczuk
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.