চিত্রের লোডে jQuery কলব্যাক (চিত্রটি ক্যাশ করা অবস্থায়ও)

Question

আমি করতে চাই:

$("img").bind('load', function() {
  // do stuff
});

যখন চিত্রটি ক্যাশে থেকে লোড করা হয় তখন লোড ইভেন্টটি আগুন দেয় না। JQuery ডকস এটিকে ঠিক করার জন্য একটি প্লাগইন প্রস্তাব করে তবে এটি কার্যকর হয় না

Comments

যেহেতু আপনার প্রশ্নের জিনিসগুলি পরিবর্তন হয়েছে। ভাঙা প্লাগইনটি একটি টুকরো টুকরো এবং পরে একটি ছোট ওয়ার্কিং প্লাগইন jQuery.imagesLoADed একটি রেপোতে সরানো হয়েছিল । তারা সমস্ত ছোট ব্রাউজার quirks ঠিক ।

— লোড

উপরে উল্লিখিত জিকুয়ের লাইব্রেরি আমার জন্য ঠিক কাজ করেছে। ধন্যবাদ!

— জর্জরিত করুন

প্লাগইনটির জন্য আপনাকে ধন্যবাদ, এটি দুর্দান্ত কাজ করেছে।

— onimojo

Answer 1

যদি srcইতিমধ্যে সেট করা থাকে, তবে ইভেন্টটি হ্যান্ডলারকে সীমাবদ্ধ করার আগে ক্যাশেডের ক্ষেত্রে ইভেন্টটি গুলি চালাচ্ছে। এটির সমাধানের জন্য, আপনি ইভেন্টটিকে ভিত্তি করে চেকিং এবং ট্রিগার করে লুপ করতে পারেন .complete, এর মতো:

$("img").one("load", function() {
  // do stuff
}).each(function() {
  if(this.complete) {
      $(this).load(); // For jQuery < 3.0 
      // $(this).trigger('load'); // For jQuery >= 3.0 
  }
});

থেকে পরিবর্তন দ্রষ্টব্য .bind()করার .one()তাই ইভেন্ট হ্যান্ডলার দুইবার চলে না।

Comments

আপনার সমাধানটি আমার পক্ষে নিখুঁতভাবে কাজ করেছে তবে আমি কিছু বুঝতে চাই, যখন এই কোডটি "যদি (এই ডট কম)" চলবে, তখন চিত্রের সামগ্রী লোড হওয়ার পরে বা আগে? কারণ আমি এটি থেকে বুঝতে পারি ea আপনি সমস্ত lo ("img") এ লুপ করছেন এবং চিত্রের সামগ্রী খালি থাকতে পারে এবং লোডটি ঘটবে না। হুঁ, আমি মনে করি আমার কিছু অনুপস্থিত রয়েছে, আপনি যদি এটি আরও ভালভাবে বুঝতে যাচ্ছেন তা বর্ণনা করতে পারলে ভাল হবে nice ধন্যবাদ।

— আমর এলগারি

যেহেতু আপনার উত্তর জিনিস পরিবর্তন হয়েছে। এখন একটি ছোট ওয়ার্কিং প্লাগইন রয়েছে jQuery.imagesLoaded । তারা সমস্ত ছোট ব্রাউজার quirks ঠিক ।

— লোড

আমি setTimeout(function(){//do stuff},0)'লোড' ফাংশনটির মধ্যে একটি যুক্ত করব ... 0 0 সমস্ত কিছু সঠিকভাবে আপডেট হয়েছে তা নিশ্চিত করার জন্য ব্রাউজার সিস্টেমকে (ডিওএম) একটি অতিরিক্ত টিক দেয়।

— ডিএসডিএসএসডিএসডিএস

@ লড - এটি একটি বিশাল প্লাগইন, কোনও স্কেল দ্বারা একেবারেই ছোট নয় !!

— vsync

যেহেতু JQuery 3 পদ্ধতি .load()ইভেন্টটি ট্রিগার করে না এবং এর জন্য 1 টি প্রয়োজনীয় যুক্তি রয়েছে, তার .trigger("load")পরিবর্তে ব্যবহার করুন

— ফোর্সউজার

Answer 2

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

javascript:

$(document).ready(function() {
    var tmpImg = new Image() ;
    tmpImg.src = $('#img').attr('src') ;
    tmpImg.onload = function() {
        // Run onload code.
    } ;
}) ;

আপডেট হয়েছে (একাধিক চিত্র হ্যান্ডেল করতে এবং সঠিকভাবে অর্ডার করা লোড সংযুক্তি সহ):

$(document).ready(function() {
    var imageLoaded = function() {
        // Run onload code.
    }
    $('#img').each(function() {
        var tmpImg = new Image() ;
        tmpImg.onload = imageLoaded ;
        tmpImg.src = $(this).attr('src') ;
    }) ;
}) ;

Comments

loadহ্যান্ডলারটি যুক্ত হওয়ার আগে আপনার সংযুক্ত করার চেষ্টা করা উচিত , এটিও কাজ করে না তবে একটি চিত্রের জন্য, ওপিএস কোড অনেকের জন্য কাজ করে :)

— নিক ক্র্যাভার

ধন্যবাদ, আমি একটি আপডেট সংস্করণ যুক্ত করেছি যা আমি আশা করি এই দুটি সমস্যার সমাধান করবে।

— Gus

#imgআইডিটি কোনও উপাদান নির্বাচক নয় :) এছাড়াও this.srcকাজ করে, যেখানে প্রয়োজন নেই সেখানে jQuery ব্যবহার করার দরকার নেই :) তবে অন্য চিত্র তৈরি করা আইএমও উভয় ক্ষেত্রেই ওভারকিলের মতো বলে মনে হচ্ছে।

— নিক ক্র্যাভার

এটি $ ('img') হওয়া উচিত। তবে সমাধানটি

— 2k15

এছাড়াও, একাধিক চিত্রের ক্ষেত্রে, আপনি যদি প্রতিটি চিত্রের জন্য DOM উপাদানটি পরিচালনা করতে চান imageLoadedতবে ব্যবহার করুনtmp.onload = imageLoaded.bind(this)

— blisstdev

Answer 3

আমার সহজ সমাধান, এটির জন্য কোনও বাহ্যিক প্লাগইন লাগবে না এবং সাধারণ ক্ষেত্রে যথেষ্ট হওয়া উচিত:

/**
 * Trigger a callback when the selected images are loaded:
 * @param {String} selector
 * @param {Function} callback
  */
var onImgLoad = function(selector, callback){
    $(selector).each(function(){
        if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
            callback.apply(this);
        }
        else {
            $(this).on('load', function(){
                callback.apply(this);
            });
        }
    });
};

এটি এর মতো ব্যবহার করুন:

onImgLoad('img', function(){
    // do stuff
});

উদাহরণস্বরূপ, লোডে আপনার চিত্রগুলি বিবর্ণ করার জন্য আপনি যা করতে পারেন:

$('img').hide();
onImgLoad('img', function(){
    $(this).fadeIn(700);
});

---

বা বিকল্প হিসাবে, আপনি যদি একটি jquery প্লাগইন মত পদ্ধতির পছন্দ করেন:

/**
 * Trigger a callback when 'this' image is loaded:
 * @param {Function} callback
 */
(function($){
    $.fn.imgLoad = function(callback) {
        return this.each(function() {
            if (callback) {
                if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
                    callback.apply(this);
                }
                else {
                    $(this).on('load', function(){
                        callback.apply(this);
                    });
                }
            }
        });
    };
})(jQuery);

এবং এটি এইভাবে ব্যবহার করুন:

$('img').imgLoad(function(){
    // do stuff
});

উদাহরণ স্বরূপ:

$('img').hide().imgLoad(function(){
    $(this).fadeIn(700);
});

Comments

ইউআর .. এবং যদি আমার চিত্রগুলির CSS এর সাথে একটি আকার সেট থাকে?

— সাইমন_উইভার

সেট width, max-heightএবং ছুটি height:auto, প্রায়ই এটা প্রস্থ ও উচ্চতা উভয়ের শুধুমাত্র যদি আপনি ইমেজ প্রসারিত করতে প্রয়োজন সেট করতে প্রয়োজন; আরও দৃ

— solution

হ্যাঁ এটি একটি ভুল টাইপিং ছিল, jsdoc ঠিক ছিল, আমি লাইন উদাহরণটি সংশোধন করেছি

— গুয়ারি

Solution .fn.imgLoad সহ এই সমাধানটি ব্রাউজারগুলিতে কাজ করে। এটি ঠিক করা আরও ভাল হবে: আই ও 10 এর জন্য && * - * / this.n NaturalHeight> 0 এই লাইনটি CSS স্টাইল বিবেচনায় নেবে না কারণ img ব্লক করা যেতে পারে তবে উচ্চতা থাকতে পারে।

— আইই

এটির (ছোট) রেসের শর্ত রয়েছে। চিত্রটি স্ক্রিপ্টে অন্য কোনও থ্রেডে লোড হতে পারে এবং তাই সম্পূর্ণরূপের চেকের মধ্যে এবং লোড ইভেন্টটি সংযুক্ত করার মধ্যে লোড হতে পারে, যা ঘটলে কিছুই ঘটবে না। সাধারণত জেএস রেন্ডারিংয়ের সাথে সুসংগত এবং সুতরাং আপনাকে রেসের অবস্থার বিষয়ে চিন্তা করতে হবে না তবে এটি ব্যতিক্রম। html.spec.whatwg.org/m মাল্টিপেজ/…

— মোগ0

Answer 4

আপনার কি সত্যিই jQuery দিয়ে এটি করতে হবে? আপনি onloadইভেন্টটি সরাসরি আপনার চিত্রের সাথেও সংযুক্ত করতে পারেন ;

<img src="/path/to/image.jpg" onload="doStuff(this);" />

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

Comments

এটি ইনলাইন জাভাস্ক্রিপ্ট ছাড়াই ক্লিনার

— হ্যাজেলনাট

হাই, বজর্ন, onloadযখন ক্যাশে থেকে দ্বিতীয়বার চিত্রটি লোড করা হবে তখন হ্যান্ডেলারটি আগুন দেবে?

— সেক্সিবিস্ট

পছন্দ করুন

— বিজ্ঞাপন

ডুড, আপনি আমার জীবন বাঁচিয়েছেন, আমি কমপক্ষে আরও এক ডজন অন্যান্য সমাধান চেষ্টা করেছি এবং কেবলমাত্র আপনারাই কাজ করেছেন। আমি আপনার উত্তরটি আরও 10 বার ভোট দেওয়ার জন্য আরও 10 টি অ্যাকাউন্ট তৈরি করার বিষয়ে গুরুত্বের সাথে ভাবছি। সিরিয়াসলি ধন্যবাদ!

— কার্লো

আমি কখনই জেএসকে ইনলাইন করতে লোকের ঘৃণা বুঝতে পারি নি। বাকী পৃষ্ঠা লোডিং প্রক্রিয়া থেকে চিত্র লোডিং পৃথকভাবে এবং অনুক্রমের বাইরে ঘটে। সুতরাং, চিত্র লোডিং সমাপ্তি সম্পর্কে তাত্ক্ষণিক প্রতিক্রিয়া পাওয়ার জন্য এটিই একমাত্র বৈধ সমাধান। যাইহোক, যদি কারও jQuery লোড হওয়ার জন্য অপেক্ষা করতে হয় এবং এটি পরে ঘটে থাকে তবে তাদের এখানে সহজ সমাধানটি ব্যবহার করতে হবে না এবং অন্য সমাধানগুলির মধ্যে একটিও ব্যবহার করতে হবে না (পিয়োটার সম্ভবত এটি সর্বোত্তম বিকল্প কারণ এটি সিউডো- এর উপর নির্ভরশীল নয়) হ্যাকস তবে গুয়ারির উচ্চতা () চেকটিও গুরুত্বপূর্ণ হতে পারে)। একটি প্রসেসিং সারি পাশাপাশি দরকারী হতে পারে।

— কিউবিকসফট

Answer 5

আপনি লোডিং ত্রুটির জন্য সমর্থন সহ এই কোডটি ব্যবহার করতে পারেন:

$("img").on('load', function() {
  // do stuff on success
})
.on('error', function() {
  // do stuff on smth wrong (error 404, etc.)
})
.each(function() {
    if(this.complete) {
      $(this).load();
    } else if(this.error) {
      $(this).error();
    }
});

Comments

এই আমার জন্য সবচেয়ে ভাল কাজ করেছে। আমি মনে করি কীটি loadহ্যান্ডলারটি প্রথমে সেট করা এবং তারপরে eachফাংশনে এটি কল করা উচিত ।

— গ্রিনআরাকাকুন 23

আপনার কোড ব্যবহার করে চিত্র src কীভাবে সেট করবেন?

— ইমদাদুসেন

নীচে কোড ব্যবহার করে চিত্র সেটিং করা হচ্ছে '' var img = new image (); img.src = sosImgURL;

— im

Answer 6

আমি নিজেই এই সমস্যাটি পেয়েছি, এমন কোনও সমাধানের জন্য সর্বত্র অনুসন্ধান করেছি যাতে আমার ক্যাশে হত্যার বা প্লাগইন ডাউনলোড করতে জড়িত না।

আমি এই থ্রেডটি তাত্ক্ষণিকভাবে দেখতে পাইনি তাই এর পরিবর্তে আমি অন্য কিছু খুঁজে পেল যা একটি আকর্ষণীয় স্থির এবং (এখানে আমার মনে হয়) এখানে পোস্ট করার উপযুক্ত:

$('.image').load(function(){
    // stuff
}).attr('src', 'new_src');

আমি এখানে মন্তব্যগুলি থেকে এই ধারণাটি পেয়েছিলাম: http://www.witheringtree.com/2009/05/image-load-event-binding-with-ie- using-jquery/

এটি কেন কাজ করে সে সম্পর্কে আমার কোনও ধারণা নেই তবে আমি এটি আই 7 এ পরীক্ষা করে দেখেছি এবং এটি এখন কাজ করার আগে কোথায় এটি ভেঙে গেছে।

আশা করি এটা সাহায্য করবে,

সম্পাদন করা

গৃহীত উত্তর আসলে ব্যাখ্যা করে যে:

যদি এসআরসি ইতিমধ্যে সেট করা থাকে তবে ইভেন্ট হ্যান্ডলারটি সীমাবদ্ধ করার আগে ইভেন্টটি ক্যাশে কেসে ইভেন্টটি ফায়ার করছে।

Comments

আমি এটি অনেকগুলি ব্রাউজারে পরীক্ষা করেছি এবং এটি কোথাও ব্যর্থ হতে দেখিনি। আমি $image.load(function(){ something(); }).attr('src', $image.attr('src'));আসল উত্সটি পুনরায় সেট করতে ব্যবহৃত হত ।

— মরিস

আমি খুঁজে পেয়েছি যে এই পদ্ধতিটি আইওএসে কমপক্ষে সাফারি / 601.1 এবং সাফারি / 602.1 এর জন্য কাজ করে না

— ই

এটি কী ব্রাউজারে রয়েছে তা জানতে পেরে দুর্দান্ত লাগবে?

— সাম্মে

Answer 7

চিত্রের এসসিআর দিয়ে একটি নতুন চিত্র উত্পন্ন করতে jQuery ব্যবহার করে এবং সরাসরি লোড পদ্ধতিটি নির্ধারণের মাধ্যমে, jQuery নতুন চিত্র উত্পন্ন করার পরে লোড পদ্ধতিটি সফলভাবে বলা হয়। এটি IE 8, 9 এবং 10 এ আমার জন্য কাজ করছে

$('<img />', {
    "src": $("#img").attr("src")
}).load(function(){
    // Do something
});

Comments

__Rjs.erb টেম্পলেটগুলি ব্যবহার করে দূরবর্তী অনুরোধের সাথে যারা রেল অন রুবেল ব্যবহার করেন তাদের ক্ষেত্রে এটিই আমার একমাত্র সমাধান found কারণ js.erb এ পার্টিয়াল ব্যবহার করে, এটি ডি বাইন্ডিং ($ ("# img" .on ("লোড")) হারায় ... এবং চিত্রগুলির জন্য "অন" পদ্ধতি: $ ("বডি") অর্পণ করা সম্ভব নয়। চালু ("লোড", "# ইমজি", ফাংশন () ...

— অ্যালবার্ট ক্যাটালি à

Answer 8

আমি একটি সমাধান খুঁজে পেয়েছি https://bugs.chromium.org/p/chromium/issues/detail?id=7731#c12 (এই কোডটি সরাসরি মন্তব্য থেকে নেওয়া হয়েছে)

var photo = document.getElementById('image_id');
var img = new Image();
img.addEventListener('load', myFunction, false);
img.src = 'http://newimgsource.jpg';
photo.src = img.src;

Comments

আমি ঠিক এটিই খুঁজছিলাম। সার্ভার থেকে আমার কাছে একটি চিত্র আসে comes আমি এটি প্রিললোড করতে এবং তারপরে পরিবেশন করতে চেয়েছিলাম। অনেক উত্তর মত সব চিত্র নির্বাচন না। ভাল একটা.

— কাই কিং

Answer 9

জিইএস-এর উদাহরণে একটি পরিবর্তন:

$(document).ready(function() {
    var tmpImg = new Image() ;
    tmpImg.onload = function() {
        // Run onload code.
    } ;

tmpImg.src = $('#img').attr('src');
})

অনলোডের আগে এবং পরে উত্সটি সেট করুন।

Comments

@ গাসের উত্তরের মতো এটি একাধিক চিত্রের জন্য কাজ করবে না ... এবং হ্যান্ডলারের srcসংযুক্তির আগে সেট করার দরকার নেই onload, এর পরে একবারে যথেষ্ট হবে।

— নিক ক্র্যাভার

Answer 10

Img অবজেক্টটি সংজ্ঞায়িত হওয়ার পরে একটি পৃথক লাইনে src যুক্তিটি পুনরায় যুক্ত করুন। এটি আইডিকে ল্যাড-ইভেন্টটি ট্রিগার করতে সক্ষম করবে। এটি কুরুচিপূর্ণ তবে এটি এখন পর্যন্ত আমি খুঁজে পাওয়া সবচেয়ে সহজ কাজ।

jQuery('<img/>', {
    src: url,
    id: 'whatever'
})
.load(function() {
})
.appendTo('#someelement');
$('#whatever').attr('src', url); // trigger .load on IE

Answer 11

আপনি যদি এইভাবে করতে চান তবে আমি আপনাকে একটি সামান্য টিপ দিতে পারি:

<div style="position:relative;width:100px;height:100px">
     <img src="loading.jpg" style='position:absolute;width:100px;height:100px;z-index:0'/>
     <img onLoad="$(this).fadeIn('normal').siblings('img').fadeOut('normal')" src="picture.jpg" style="display:none;position:absolute;width:100px;height:100px;z-index:1"/>
</div>

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

Answer 12

আইইয়ের সাথে আমার এই সমস্যাটি ছিল যেখানে e.target.width অপরিজ্ঞাত হবে। লোড ইভেন্টটি আগুন লাগবে তবে আমি ছবিতে চিত্রের মাত্রা পেতে পারি না (ক্রোম + এফএফ কাজ করেছে)।

আপনি দেখতে পেলেন আপনার জন্য eCurrentTarget.n NaturalWidth এবং e.currentTarget.n NaturalHight ।

আবার, IE নিজের (আরও জটিল) উপায়ে জিনিসগুলি করে।

Answer 13

আপনি JAIL প্লাগইন ব্যবহার করে আপনার সমস্যার সমাধান করতে পারেন যা আপনাকে অলস লোড চিত্রগুলি (পৃষ্ঠার কার্যকারিতা উন্নতি করতে) এবং কলব্যাকটিকে প্যারামিটার হিসাবে পাস করার অনুমতি দেয়

$('img').asynchImageLoader({callback : function(){...}});

এইচটিএমএলের মতো দেখতে হবে

<img name="/global/images/sample1.jpg" src="/global/images/blank.gif" width="width" height="height" />

Answer 14

আপনি যদি খাঁটি সিএসএস সমাধান চান তবে এই কৌশলটি খুব ভালভাবে কাজ করে - ট্রান্সফর্ম অবজেক্টটি ব্যবহার করুন। চিত্রগুলি যখন ক্যাশ করা হয় বা না হয় তখন এগুলিও কাজ করে:

সিএসএস:

.main_container{
    position: relative;
    width: 500px;
    height: 300px;
    background-color: #cccccc;
}

.center_horizontally{
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: green;
  left: 50%;
  top: 0;
  transform: translate(-50%,0);
}

.center_vertically{
  position: absolute;
  top: 50%;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: blue;
  transform: translate(0,-50%);
}

.center{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: red;
  transform: translate(-50%,-50%);
}

এইচটিএমএল:

<div class="main_container">
  <div class="center_horizontally"></div>
  <div class="center_vertically"></div>
  <div class="center"></div>
  </div>
</div

কোডপেন উদাহরণ

কোডেপেন কম উদাহরণ

Comments

এটি কীভাবে চিত্র লোডিংয়ের সাথে কাজ করে তার একটি উদাহরণ দিতে পারেন?

— হাসটিগ জুসামেনস্টেলেন