JQuery জিজ্ঞাসা করার আনুষ্ঠানিক উপায় কিছু কার্যকর করার আগে সমস্ত চিত্র লোড হওয়ার জন্য অপেক্ষা করুন

640

JQuery এ আপনি যখন এটি করেন:

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

এটি আপনার কোড লোড হওয়ার এবং কার্যকর করার জন্য ডিওএমের জন্য অপেক্ষা করে। যদি সমস্ত চিত্র লোড না করা থাকে তবে এটি এখনও কোডটি কার্যকর করে। এটি স্পষ্টতই আমরা চাই যদি আমরা কোনও ডিওএম স্টাফের সূচনা করি যেমন উপাদানগুলি দেখানো বা লুকানো বা ইভেন্ট সংযুক্তকরণ।

যদিও আমি কিছু অ্যানিমেশন চাই এবং সমস্ত চিত্র লোড না হওয়া পর্যন্ত এটি চলতে চাই না তা বলি until এটি করার জন্য jQuery এ কোনও অফিসিয়াল উপায় আছে?

আমার কাছে সবচেয়ে ভাল উপায়টি হ'ল ব্যবহার করা <body onload="finished()">, তবে আমার যদি না করতে হয় তবে আমি সত্যিই এটি করতে চাই না।

দ্রষ্টব্য: ইন্টারনেট এক্সপ্লোরারে jQuery 1.3.1 এ একটি বাগ রয়েছে যা কোডটি অভ্যন্তরীণ কার্যকর করার আগে সমস্ত চিত্র লোড হওয়ার জন্য অপেক্ষা করে $function() { }। সুতরাং আপনি যদি সেই প্ল্যাটফর্মটি ব্যবহার করছেন তবে উপরে বর্ণিত সঠিক আচরণের পরিবর্তে আমি যে আচরণটি সন্ধান করছি তা পেয়ে যাবেন।

jquery 
— Simon_Weaver
সূত্র
3
$("img").load()কাজ করে না ?
— লুকাস
1
আমি মনে করি এটি উল্লেখ করার মতো হতে পারে যে আপনি যদি মাত্রাগুলি বৈশিষ্ট্যগুলি সেট করেন তবে আপনি এই জাতীয় মাত্রার উপর নির্ভরশীল প্রস্তুত ফাংশনে কিছু কোড নিরাপদে কার্যকর করতে পারেন। পিএইচপি দিয়ে আপনি তাদের ডিবিতে বা ব্রাউজারে আউটপুট দেওয়ার আগে আপলোড করার জন্য php.net/manual/en/function.getimagesize.php দিয়ে তাদের ধরে নিতে পারেন ।
— আলকিন
যদি আপনি কিছু একটি অবিশ্বাস্য কাজ করছেন, তাহলে অত্যন্ত ভাল ও জনপ্রিয় imagesloaded জাভাস্ক্রিপ্ট নিচে এই উত্তরটি উল্লেখ গ্রন্থাগার খুঁজে বার করো stackoverflow.com/a/26458347/759452
— Adrien হউন
"এখানে আমি অফিসিয়াল উপায় ব্যতীত অন্য কিছু খুঁজে পেতে এসেছি।"
— লিয়ন পেলেটিয়ার

উত্তর:

1034

JQuery এর সাহায্যে আপনি ডিওএম লোড হওয়ার সাথে সাথে কিছু কার্যকর করতে এবং অন্য সমস্ত জিনিস যেমন লোড করা হয় $(document).ready()তখন কিছু কার্যকর করতে ব্যবহার করেন যেমন যেমন চিত্রগুলি।$(window).on("load", handler)

পার্থক্যটি নিম্নলিখিত সম্পূর্ণ এইচটিএমএল ফাইলটিতে দেখা যায়, আপনি যদি 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>

এটির সাথে, চিত্রগুলি লোড হওয়ার আগে সতর্কতা বাক্সটি উপস্থিত হয় কারণ DOM সেই সময়ে প্রস্তুত। আপনি যদি তারপর পরিবর্তন:

$(document).ready(function() {

মধ্যে:

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

চিত্রগুলি লোড হওয়ার পরে সতর্কতা বাক্সটি উপস্থিত হবে না ।

সুতরাং, পুরো পৃষ্ঠাটি প্রস্তুত না হওয়া পর্যন্ত অপেক্ষা করার জন্য আপনি এর মতো কিছু ব্যবহার করতে পারেন:

$(window).on("load", function() {
    // weave your magic here.
});
— paxdiablo
সূত্র
32
কপালকে +1 পুরোপুরি ভুলে গেছে that window (উইন্ডো) load লোড () ছবি না করা পর্যন্ত আগুন জ্বালাবে না।
— পাওলো বার্গান্টিনো
10
আমিও তাই করেছি। এমনকি, একটি উত্তরের মাধ্যমে পড়ুন এটি না জেনে আমার এবং এখনও এটি বুঝতে পারছেন না।
— রিমিয়ান
24
কেবল একটি নোট - এটি ক্রোমিয়ামের অধীনে কাজ করবে বলে মনে হচ্ছে না (এবং আমি ক্রোম অনুমান করি)। $ (উইন্ডো) ready
— নাথান ক্রুজ
24
তবে এটি $ (উইন্ডো) load লোড (ফাংশন ())
— টিজে-
3
@ কিয়রকোড আপনি কি নিশ্চিত যে এটি কেবলমাত্র আইই এর চিত্রগুলি ক্যাশেড করার কারণে নয়? যদি তা ঘটে থাকে তবে তারা কোনও "লোড" ইভেন্টকে মোটেও চালিত করবে না। এই নিবন্ধটি এই সমস্যাটি পেতে সহায়তা করে।
— জেমি বার্কার 15
157

আমি এমন একটি প্লাগইন লিখেছিলাম যা কলব্যাকগুলিকে গুলি করতে পারে যখন চিত্রগুলিতে উপাদানগুলি লোড হয়ে যায়, বা প্রতি চিত্র লোড হওয়ার পরে একবারে আগুন লাগে।

এটি অনুরূপ $(window).load(function() { .. }), বাদে এটি আপনাকে কোনও নির্বাচককে পরীক্ষা করতে সংজ্ঞায়িত করতে দেয়। আপনি যদি কেবলমাত্র জানতে চান যে সমস্ত চিত্র #content(উদাহরণস্বরূপ) কখন লোড হয়েছে, এটি আপনার জন্য প্লাগইন।

এছাড়া সিএসএস উল্লেখ চিত্র, যেমন লোড সমর্থন background-image, list-style-imageইত্যাদি

jQuery প্লাগইন অপেক্ষা ফোরামগুলি

ব্যবহারের উদাহরণ

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

JsFiddle উপর উদাহরণ ।

আরও ডকুমেন্টেশন গিটহাব পৃষ্ঠায় উপলব্ধ।

— Alex
সূত্র
1
ধন্যবাদ!! load। লোড () আমার পক্ষে কাজ করছে না, তবে এটি কৌশলটি পুরোপুরি কার্যকর করে।
— ফ্রেক্সটিল
আমি ক্রোম সংস্করণ 22.0.1229.94 এবং এই প্লাগইনটি ব্যবহার করেছি এবং আমি ওয়েটফর্মআইমেজের মধ্যে লোড হওয়া চিত্রগুলি থেকে অফসেটগুলি পড়ার চেষ্টা করেছি: ('img selector').each(function(index) { var offset = $(this).offset(); ...});তবে, অফসেট.টপ এখনও শূন্য। কেন?
— বাসজিরো
1
@basZero আরও প্রসঙ্গ ছাড়াই বলা মুশকিল। ইস্যু পৃষ্ঠাতে একটি সমস্যা উত্থাপন করুন ।
— অ্যালেক্স
যখন চিত্রগুলি বন্ধ করা হয় তখন এটি আমার পক্ষে কাজ করে না। যে কোনও 1 কি এইটির জন্য একটি কার্যনির্বাহী?
— মনদীপ জৈন
2
এটি মূলত চিত্রগুলির সাথে অ্যানালগযুক্ত রয়েছে তবে এটি এসসিআরসেটের সাথেও কাজ করে। ঠিক আমি খুঁজছেন ছিল কি! দুর্দান্ত প্লাগইন!
— ফ্যাবিয়ান শোনার
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
— জোনাথন
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()?

উপর ansered হিসাবে /programming/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load/26929951

এটা সুযোগের বিষয়। imagesLoaded, আপনি ইমেজ একটি সেট লক্ষ্য করার মঞ্জুরি দেয় যেহেতু $(window).load()লক্ষ্যমাত্রা সব সম্পদ - সমস্ত চিত্র, বস্তু, .js এবং সিএসএস ফাইল, এবং এমনকি অনুরোধকে সহ। সম্ভবত, ইমেজসলোডগুলি শীঘ্রই ট্রিগার করবে $(window).load()কারণ এটি একটি ছোট সংখ্যক সম্পত্তিকে টার্গেট করছে।

ছবি লোড ব্যবহারের অন্যান্য ভাল কারণ

  • আনুষ্ঠানিকভাবে IE8 + দ্বারা সমর্থিত
  • লাইসেন্স: এমআইটি লাইসেন্স
  • নির্ভরতা: কিছুই না
  • ওজন (নিখুঁত & জিজেপড): 7 কেবি মিনিফায়েড (হালকা!)
  • বিল্ডার ডাউনলোড করুন (ওজন হ্রাস করতে সহায়তা করে): প্রয়োজন নেই, ইতিমধ্যে ক্ষুদ্র
  • গিথুব: হ্যাঁ
  • সম্প্রদায় এবং অবদানকারীরা: বেশ বড়, 4000+ সদস্য, যদিও কেবল ১৩ জন অবদানকারী
  • ইতিহাস ও অবদান: তুলনামূলকভাবে পুরানো হিসাবে স্থির (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 চিত্রের জন্য মফিফাইড প্রতিক্রিয়া না দেয় মানে এই চিত্রটি ক্যাশে হয়েছে তবে এটি সঠিকভাবে কাজ করবে না।
— জনিফ্রি
1

চিত্রগুলি লকড প্যাকেগড v3.1.8 ব্যবহার করুন (6..৮ কিলোমিটার কম হলে)। এটি তুলনামূলকভাবে পুরানো (২০১০ সাল থেকে) তবে এখনও সক্রিয় প্রকল্প।

আপনি এটি গিথুব এ খুঁজে পেতে পারেন: https://github.com/desandro/imagesloaded

তাদের অফিসিয়াল সাইট: http://imagesloaded.desandro.com/

এটি ব্যবহার করার চেয়ে কেন ভাল: 

$(window).load()

কারণ আপনি এই জাতীয় চিত্রগুলি গতিশীলভাবে লোড করতে চাইতে পারেন: জেএসফিডাল

$('#button').click(function(){
    $('#image').attr('src', '...');
});
— ইয়েভেগেনি আফানসিয়েভ
সূত্র
1
প্রকৃতপক্ষে, চিত্রগুলি লোড করা এসসিআর বিশিষ্ট মান ক্রস ব্রাউজারের পরিবর্তনকে সমর্থন করে না। আপনাকে অবশ্যই প্রতিবার একটি নতুন চিত্র উপাদান তৈরি করতে হবে। এটি ফায়ারফক্সে চেষ্টা করুন এবং আপনি সমস্যাটি উপস্থিত দেখবেন।
— অ্যাড্রিয়েন
ভাল কথা, আমি কেবল গুগল ক্রোম এবং আইই -11 এ এখনও পরীক্ষা করেছি। এটা কাজ ছিল। ধন্যবাদ।
— ইয়েভেগেনি আফানসিয়েভ
আমি বিন্দু "আপনি কি imagesloaded সঙ্গে ব্যবহার করতে পারবেন না", GitHub থেকে imagesLoaded প্রাসঙ্গিক ইস্যু দেখুন আমার প্রশ্নের stackoverflow.com/q/26927575 এই ক্রস ব্রাউজার কোনো সমস্যা যোগ করেনি github.com/desandro/imagesloaded/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>
— মারিউজ চারকজুক
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.