jquery - tutorial - w3schools




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

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

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

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

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

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

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


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/


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

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

<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.
});

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

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();        
});

उन लोगों के लिए जो एक छवि के डाउनलोड पूर्ण होने की अधिसूचित होना चाहते हैं जो $(window).load बाद अनुरोध किया जाता है। 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");
});

मेरा समाधान समान है। 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>

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

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

जैसा कि https://.com/questions/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load/26929951 पर आधारित है

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

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

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

साधन


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

Demo

Download

/**
 *  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);




jquery