ইমেজ লোড করা jQuery ইভেন্ট

Question 1

সমস্ত চিত্র যখন jQuery ইভেন্টের মাধ্যমে লোড হয় তখন এটি সনাক্ত করা সম্ভব?

আদর্শভাবে, একটি হওয়া উচিত

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

বা

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

তবে আমি এরকম জিনিস পাই না।

আমি এরকম একটি ইভেন্ট সংযুক্ত করার কথা ভেবেছিলাম:

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

তবে কোনও চিত্র লোড করতে ব্যর্থ হলে এই ব্রেক কি হবে? পদ্ধতিটি কল করার জন্য এবং সঠিক সময়ে এটি সমালোচনামূলকভাবে গুরুত্বপূর্ণ।

Question 2

প্রতি jQuery এর ডকুমেন্টেশন , ইমেজ সহ লোড ইভেন্ট ব্যবহার করার জন্য বেশ কয়েকটি ক্যাভেট রয়েছে। অন্য উত্তরে উল্লিখিত হিসাবে, ahpi.imgload.js প্লাগইনটি নষ্ট হয়ে গেছে, তবে লিঙ্কযুক্ত পল আইরিশ টুকরোটি আর রক্ষণাবেক্ষণ করা হয় না।

প্রতি পল আইরিশ, চিত্র লোড সম্পূর্ণ ইভেন্টগুলি সনাক্ত করার জন্য ক্যানোনিকাল প্লাগইন এখন এখানে:

https://github.com/desandro/imagesলোড হয়েছে

Question 3

আপনি যদি সমস্ত চিত্রের জন্য না পরীক্ষা করতে চান তবে একটি নির্দিষ্ট চিত্র (উদাহরণস্বরূপ, ডম ইতিমধ্যে সম্পূর্ণ হওয়ার পরে আপনি গতিশীলভাবে প্রতিস্থাপন করেছেন এমন চিত্র) আপনি এটি ব্যবহার করতে পারেন:

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

Question 4

আপনি এটি পরিচালনা করতে আমার প্লাগইন ওয়েটফরমাজগুলি ব্যবহার করতে পারেন ...

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

এর সুবিধাটি হ'ল আপনি এটিকে কোনও পূর্বপুরুষের উপাদানে স্থানীয়করণ করতে পারেন এবং এটি সিএসএসে উল্লিখিত চিত্রগুলি option চ্ছিকভাবে সনাক্ত করতে পারে।

এটি আইসবার্গের কেবলমাত্র টিপ, আরও কার্যকারিতার জন্য ডকুমেন্টেশন চেক করুন ।

Question 5

আইএমজি ইভেন্ট হ্যান্ডলার হিসাবে jQuery $ ()। লোড () ব্যবহারের গ্যারান্টি নেই। যদি চিত্রটি ক্যাশে থেকে লোড হয় তবে কিছু ব্রাউজার ইভেন্টটি বন্ধ করে দিতে পারে না। সাফারির (পুরানো?) সংস্করণগুলির ক্ষেত্রে, আপনি যদি কোনও আইএমজি উপাদানটির এসআরসি বৈশিষ্ট্যটিকে একই মানতে পরিবর্তন করেন , তবে ওভারলোড ইভেন্টটি চালিত হবে না।

দেখা যাচ্ছে যে এটি সর্বশেষ jQuery (1.4.x) - http://api.jquery.com/load-event - - এ উদ্ধৃতিতে স্বীকৃত :

এটা সম্ভব যে চিত্রটি ব্রাউজারের ক্যাশে থেকে লোড করা হলে লোড ইভেন্টটি ট্রিগার করা হবে না। এই সম্ভাবনার জন্য অ্যাকাউন্টে, আমরা একটি বিশেষ লোড ইভেন্ট ব্যবহার করতে পারি যা চিত্রটি প্রস্তুত থাকলে অবিলম্বে আগুন লাগবে fire ইভেন্ট.স্পেশাল.লোড বর্তমানে প্লাগইন হিসাবে উপলব্ধ।

আছে: একটি প্লাগ ইন এখন এই কেস এবং ইন্টারনেট এর "সম্পূর্ণ" IMG উপাদান লোড রাজ্যের জন্য সম্পত্তি চিনতে হয় http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

Question 6

অনুযায়ী এই উত্তর , আপনি ব্যবহার করতে পারেন , jQuery লোড ঘটনা উপর windowপরিবর্তে বস্তুর document:

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

পৃষ্ঠার সমস্ত সামগ্রী লোড হওয়ার পরে এটি ট্রিগার করা হবে। এটি থেকে পৃথক হয় jQuery(document).load(...)যা থেকে ডিওএম লোডিং শেষ হওয়ার পরে ট্রিগার হয়।

Question 7

চিত্রসলোডড প্লাগইন হ'ল উপায়, আপনার যদি ক্রসব্রোজার সমাধান প্রয়োজন হয়

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

আপনার যদি কেবলমাত্র একটি ওয়ার্কআউডের প্রয়োজন হয়, এটি করবে

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

Question 8

এই মুহুর্তে ahpi.imgload.js প্লাগইনে একটি নোট রয়েছে যা বর্তমানে ভেঙে গেছে এবং এর পরিবর্তে এই টুকরোটি ব্যবহার করে দেখতে: https://gist.github.com/797120/7176db676f1e0e20d7c23933f9fc655c2f120c58

Question 9

একই-উত্সের চিত্রগুলির জন্য, আপনি ব্যবহার করতে পারেন:

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

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

Question 10

হতে পারে এই প্লাগইনটি কার্যকর হতে পারে: http://www.farinspace.com/jquery-image-preload-plugin/

Question 11

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

Question 12

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

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

});

Question 13

আমি আমার নিজস্ব স্ক্রিপ্ট তৈরি করেছি, কারণ অনেকগুলি প্লাগইন বেশ স্ফীত হয়ে গেছে বলে আমি খুঁজে পেয়েছি এবং এটি কেবল আমার ইচ্ছা মতো কাজ করতে চেয়েছিল। প্রতিটি চিত্রের উচ্চতা (নেটিভ চিত্রের উচ্চতা) আছে কিনা তা খনির পরীক্ষা করে। ক্যাচিংয়ের সমস্যাগুলি ঘটার জন্য আমি এটি $ (উইন্ডো)। লোড () ফাংশনটির সাথে একত্রিত করেছি।

আমি কোডটি এটি বেশ ভারীভাবে মন্তব্য করেছি, সুতরাং এটি ব্যবহার করা আপনার পক্ষে আগ্রহী হওয়া উচিত। এটি আমার পক্ষে পুরোপুরি কাজ করে।

আরও অ্যাডো না করে, এটি এখানে:

imgLoad.js স্ক্রিপ্ট

Question 14

সমস্ত চিত্র লোড হওয়ার জন্য অপেক্ষা করা হচ্ছে ...
আমি এখানে আমার j j0000 এর সমস্যাটির নোঙ্গর পেয়েছি jquery: একটি ধারক ডিভের চিত্র লোড হওয়া ইভেন্টটি কীভাবে শুনব? .. এবং "যদি (এই.কমপ্লিট)"
সমস্ত জিনিস লোড হওয়ার জন্য অপেক্ষা করা হচ্ছে এবং কিছু সম্ভবত ক্যাশে রয়েছে! .. এবং আমি "ত্রুটি" ইভেন্টটি যুক্ত করেছি ... এটি সমস্ত ব্রাউজার জুড়েই শক্তিশালী

$(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/

Question 15

window.load = function(){}

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

https://developer.mozilla.org/en-US/docs/Web/API/ গ্লোবালEventHandlers/onload