JQuery সহ কোনও চিত্র লোড হয়েছে কিনা (ত্রুটি নেই) তা পরীক্ষা করুন

Question

আমি আনঅর্ডারার্ড তালিকায় থাকা চিত্রের থাম্বনেইলগুলি ম্যানিপুলেট করতে jQuery লাইব্রেরির সাথে জাভাস্ক্রিপ্ট ব্যবহার করছি। চিত্রটি লোড হয়ে গেলে এটি একটি কাজ করে, যখন ত্রুটি ঘটে তখন এটি অন্য কিছু করে। আমি ইভেন্ট হিসাবে jQuery load()এবং error()পদ্ধতি ব্যবহার করছি । এই ইভেন্টগুলির পরে আমি jQuery ইভেন্টগুলি নিবন্ধ করার আগে চিত্রটি ইতিমধ্যে লোড করা হয়নি তা নিশ্চিত করার জন্য .comple এর জন্য চিত্র DOM উপাদানটি যাচাই করে নিই।

JQuery ইভেন্টগুলি রেজিস্টার করার আগে কোনও ত্রুটি দেখা দেয় ব্যতীত এটি সঠিকভাবে কাজ করে। আমি কেবলমাত্র সমাধানটিই ভাবতে পারি যে onerrorবিশ্বব্যাপী কোথাও একটি "পতাকা" সংরক্ষণ করার জন্য img বৈশিষ্ট্যটি ব্যবহার করা (বা এটি নোডে রয়েছে) যেটি বলে যে এটি ব্যর্থ হয়েছে তাই jQuery সেই "স্টোর / নোড" পরীক্ষা করতে পারে। অসম্পূর্ণ।

এর চেয়ে ভাল সমাধান কারও আছে?

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

Comments

আপনি কখন jQuery ইভেন্টগুলি নিবন্ধভুক্ত করবেন? সম্ভবত কিছু কোড সাহায্য করবে। :)

— ঠিক 1

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

— উইলিয়াম

সম্ভাব্য সদৃশ কিভাবে পারা যাবে কোনো চিত্র, লোড হওয়ার জাভাস্ক্রিপ্ট / jQuery ব্যবহার?

— স্টিভ টাবার

Answer 1

অন্য বিকল্পটি হ'ল মেমরি চিত্রের উপাদানটি তৈরি করে onloadএবং / বা onerrorইভেন্টগুলিকে ট্রিগার করা এবং তার srcবৈশিষ্ট্যটি srcমূল চিত্রটির মূল বৈশিষ্ট্যের সাথে সেট করে। আমি কী বোঝাতে চাইছি তার উদাহরণ এখানে:

$("<img/>")
    .on('load', function() { console.log("image loaded correctly"); })
    .on('error', function() { console.log("error loading image"); })
    .attr("src", $(originalImage).attr("src"))
;

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

Comments

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

— উইলিয়াম

ভাল, আপনি ঠিক বলেছেন। ক্রম অবশ্যই বিকাশকারী সবচেয়ে বিরক্তিকর ব্রাউজার। উজ্জ্বলতে, আমি মনে করি যে আমি প্রায় একটি কাজ পেয়েছি: চিত্র উত্সটি "" এর পরে সেট করুন তবে মূল উত্সে ফিরে আসুন। আমি আমার উত্তর আপডেট করব।

— জাভি

আপনি করা উচিত .attrলাইন পর.load এবং .errorলাইন। অন্যথায় আপনি ঝুঁকিপূর্ণ যে এই কলব্যাকগুলি যুক্ত হওয়ার আগে চিত্রটি লোড হতে পারে (বা কোনও ত্রুটির মুখোমুখি হতে পারে) , এবং তাদের কল করা হবে না।

— কলম্ব

@ জাভি ক্রোম হ'ল ইন্টারনেট এক্সপ্লোরার 7 বা তারও কমের জন্য বিকাশ করার জন্য সবচেয়ে বিরক্তিকর ব্রাউজার নয়। চিত্র লোডে একটি G _GET পরামিতি যুক্ত করার পাশাপাশি, গ্রোমিক্সের পরামর্শ মতো একটি নতুন চিত্র প্রতিবার লোড হবে।

— এসএসএইচ এই

.load()এবং .error()পদ্ধতি বিভ্রান্তিকর হয় এবং এখন অবচিত ব্যবহার .on()এবং ব্যবহার loadএবং errorযেমন ইভেন্ট নেই।

— ফির্বস - লেটসডব্লিউ.পি.ও মারিও

Answer 2

ক্রম completeএবং naturalWidthবৈশিষ্ট্য পরীক্ষা করুন ।

https://stereochro.me/ideas/detecting-broken-images-js

function IsImageOk(img) {
    // During the onload event, IE correctly identifies any images that
    // weren’t downloaded as not complete. Others should too. Gecko-based
    // browsers act like NS4 in that they report this incorrectly.
    if (!img.complete) {
        return false;
    }

    // However, they do have two very useful properties: naturalWidth and
    // naturalHeight. These give the true size of the image. If it failed
    // to load, either of these should be zero.
    if (img.naturalWidth === 0) {
        return false;
    }

    // No other way of checking: assume it’s ok.
    return true;
}

Comments

আকর্ষণীয়, আমি সেই পোস্টটি আগে দেখছিলাম এবং আমি বুঝতে পারি নি যে তারা করছে! আইই হিসাবে প্রাকৃতিকউইথের জন্য সম্পূর্ণ হিসাবে সংজ্ঞায়িত করা হয় না। এখনই এটি পরীক্ষা করতে যাচ্ছি।

— উইলিয়াম

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

— জাইজিয়ান

img.complete && টাইপ করুন img.n NaturalWidth! = 'অপরিজ্ঞাত' && img.n NaturalWidth! = 0;

— অ্যাড্রিয়ান স্লেলে

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

— মাইকেল মার্টিন-স্মাকার

যারা কৌতূহলী তাদের জন্য, এটি নীচে লিঙ্কযুক্ত চিত্রগুলি লাইব্রেরিটি কি ঠিক ঠিক তাই। সুতরাং, এক-অফ ব্যবহারের জন্য, এটির জন্য যান: github.com/desandro/imagesloaded/blob/master/…

— সিনকোনেডা

Answer 3

উপাদানটির জন্য ডাব্লুimg 3 সি এইচটিএমএল স্পেসিফিকেশন সম্পর্কে আমার বোঝার ভিত্তিতে , আপনার মতো completeএবং naturalHeightবৈশিষ্ট্যের সংমিশ্রণটি ব্যবহার করে এটি করতে সক্ষম হওয়া উচিত :

function imgLoaded(imgElement) {
  return imgElement.complete && imgElement.naturalHeight !== 0;
}

completeবৈশিষ্ট্যের জন্য বিশেষ থেকে:

নিম্নলিখিত শর্তগুলির মধ্যে যদি সত্য হয় তবে আইডিএল বৈশিষ্ট্য সম্পূর্ণ করতে হবে:

• Src বৈশিষ্ট্য বাদ দেওয়া হয়েছে।
• নেটওয়ার্কিং টাস্ক সোর্স দ্বারা চূড়ান্ত টাস্কটি সন্ধান করার পরে একবার রিসোর্সটি পাওয়া গেলে সারিবদ্ধ করা হয়।
• Img উপাদানটি সম্পূর্ণ উপলব্ধ is
• Img উপাদানটি নষ্ট হয়ে গেছে।

অন্যথায়, গুণটি অবশ্যই ভুল প্রত্যাবর্তন করবে।

তাই মূলত, completeযদি চিত্রটি লোডিং শেষ করে, বা লোড করতে ব্যর্থ হয় তবে সত্যটি প্রত্যাশা করে। যেহেতু আমরা কেবলমাত্র সেই ক্ষেত্রেই চাই যেখানে চিত্রটি সাফল্যের সাথে লোড হয়েছে সেখানে আমাদের nauturalHeightবৈশিষ্ট্যটিও পরীক্ষা করা দরকার :

আইডিএল বৈশিষ্ট্যগুলি রয়েছে naturalWidthএবং naturalHeightঅবশ্যই চিত্রের অভ্যন্তরীণ প্রস্থ এবং উচ্চতা, সিএসএস পিক্সেলগুলিতে, যদি চিত্রটি উপলভ্য থাকে তবে অন্যথায় 0 দিতে হবে।

এবং এর availableমতো সংজ্ঞায়িত:

একটি আইএমজি সর্বদা নিম্নলিখিত অবস্থার একটিতে থাকে:

• অনুপলব্ধ - ব্যবহারকারী এজেন্ট কোনও চিত্রের ডেটা গ্রহণ করেনি।
• আংশিকভাবে উপলব্ধ - ব্যবহারকারী এজেন্ট কিছু চিত্রের ডেটা পেয়েছে।
• সম্পূর্ণরূপে উপলভ্য - ব্যবহারকারী এজেন্ট সমস্ত চিত্রের ডেটা পেয়েছে এবং কমপক্ষে চিত্রের মাত্রা উপলব্ধ।
• ভাঙা - ব্যবহারকারী এজেন্ট সমস্ত চিত্রের ডেটা যা অর্জন করতে পারে তা অর্জন করেছে, তবে চিত্রের মাত্রা পেতে এটি যথেষ্ট পরিমাণে ডিকোডও করতে পারে না (উদাহরণস্বরূপ চিত্রটি ক্ষতিগ্রস্থ হয়েছে, বা ফর্ম্যাটটি সমর্থিত নয়, বা কোনও ডেটা প্রাপ্ত করা যায়নি) ।

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

সুতরাং চিত্রটি যদি "ভাঙা" হয় (লোড করতে ব্যর্থ হয়), তবে এটি ভাঙ্গা অবস্থায় থাকবে, উপলভ্য অবস্থায় নয়, তাই naturalHeight0 হবে।

অতএব, চেকিংয়ে imgElement.complete && imgElement.naturalHeight !== 0আমাদের জানাতে হবে যে চিত্রটি সফলভাবে লোড হয়েছে কিনা।

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

Comments

কাজ করে না চিত্রটি "সামগ্রী: url" স্টাইল দিয়ে লোড করা হয়

— deathangel908

এই ব্রাউজার হিসাবে রিপোর্ট প্রাকৃতিক উচ্চতা / প্রস্থ হতে 0. প্রাসঙ্গিক বাগ SVG চিত্র সঙ্গে ফায়ারফক্স কাজ বলে মনে হচ্ছে না bugzilla.mozilla.org/show_bug.cgi?id=1328124

— leeb

Answer 4

আমি অনেকগুলি বিভিন্ন উপায়ে চেষ্টা করেছি এবং এই পথটিই কেবল আমার পক্ষে কাজ করেছে

//check all images on the page
$('img').each(function(){
    var img = new Image();
    img.onload = function() {
        console.log($(this).attr('src') + ' - done!');
    }
    img.src = $(this).attr('src');
});

একবার সমস্ত চিত্র DOM এ লোড হয়ে প্রস্তুত হয়ে যাওয়ার পরে আপনি ট্রিগারযুক্ত কলব্যাক ফাংশন যুক্ত করতে পারেন। এটি গতিশীল যুক্ত হওয়া চিত্রগুলির জন্যও প্রযোজ্য। http://jsfiddle.net/kalmarsh80/nrAPk/

Comments

jsfiddle লিঙ্কটি ভাঙা

— অ্যালেক্স কার্শিন

আমি উপরের আকর্ষণীয় পাঠগুলি পরীক্ষা করেছি এবং তারা মুষ্টিমেয় সাধারণ ব্রাউজারগুলির ক্যাশেড / আনচড পরীক্ষার মধ্যে ব্যর্থ। এই উত্তরটি অন্যটির সাথে সমান তবে আমি এখনই এটি প্রয়োগ ও পরীক্ষিত এক, আমি এটি নিয়ে কাজ করতে পেরে নিশ্চিত করতে পারি: এজডিন 10, আইই 11Win8.1, Win7IE10, Win7IE9, আইওএস 10.2 ক্রোম, আইওএস 10.2 সাফারি, ম্যাক ওস 10.12 ক্রোম, ম্যাক ওএস 10.12 সাফারি, ম্যাক ওস 10.12 ফায়ারফক্স, গুগল পিক্সেল 7.1, স্যামসাং এস 5 অ্যান্ড্রয়েড 4.4। অ্যাডভেন্টলিস্টার / রিমুভএভেন্টলিস্টনারও ব্যবহার করতে ভুলবেন না: ডি

— ডানজাহ

Answer 5

imagesLoadedজাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করুন ।

সরল জাভাস্ক্রিপ্ট এবং একটি jQuery প্লাগইন হিসাবে ব্যবহারযোগ্য।

বৈশিষ্ট্য:

• আনুষ্ঠানিকভাবে IE8 + দ্বারা সমর্থিত
• লাইসেন্স: এমআইটি
• নির্ভরতা: কিছুই না
• ওজন (নিখুঁত & জিজেপড): 7 কেবি মিনিফায়েড (হালকা!)

সম্পদ

• গিথুবে প্রকল্প: https://github.com/desandro/imagesloaded
• অফিসিয়াল ওয়েবসাইট: http://imagesloaded.desandro.com/
• /programming/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load
• চিত্রগুলি লোড করা জাভাস্ক্রিপ্ট লাইব্রেরি: ব্রাউজার এবং ডিভাইস সমর্থন কি?

Comments

এটি আমার জন্য পুরোপুরি কাজ করেন। ফাংশন চেক ইমেজস (imgs) {$ (imgs) .Ech (ফাংশন () {$ (imgs)। চিত্রগুলি লড () ফাংশন (উদাহরণস্বরূপ, চিত্র) {যদি (image.isLoaded == মিথ্যা) so কনসোল.লগ (চিত্র .img.src + 'পাওয়া যায়নি' '); চিত্র.img.src = "/templates/img/no-image.jpg";}});}); }

— রুস্টার 242

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

— vsync

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

— জোশ হ্যারিসন

হ্যাঁ আমি এটি নিজেই ব্যবহার করি এবং কখনও কখনও এটি কার্যকর হয় না, তাই এটি ব্যর্থ হয় এমন কেসগুলি কাভার করার জন্য আমি একটি সেটটাইমআউট ব্যবহার করি

— ভিএনসিএন

ছবিগুলি লোড হওয়া প্লাগইনটি কেন ব্যবহার করতে চান তার বেশ কয়েকটি ভাল কারণ রয়েছে: completeসম্পত্তিটি স্পষ্টভাবে সমর্থিত বলে মনে হয় না: ব্রাউজার সমর্থন সম্পর্কিত তথ্যের একটি নির্ভরযোগ্য উত্স খুঁজে পেতে অক্ষম। completeসম্পত্তিরও স্পষ্ট স্পেসিফিকেশন রয়েছে বলে মনে হয় না: HTML5 স্পেকটিই কেবল এটির উল্লেখ করে এবং এটি রাইটিংয়ের সময় একটি খসড়া সংস্করণে এখনও রয়েছে। যদি আপনি কেবল naturalWidth& naturalHeightআইই 9+ সমর্থন ব্যবহার করেন তবে চিত্রটি লোড হয়েছে কিনা তা জানতে আপনি যদি এটি ব্যবহার করেন তবে এটি পুরানো ব্রাউজারগুলিতে কাজ করার জন্য আপনার কিছু "চতুর" কৌশল প্রয়োজন এবং আপনার অবশ্যই ক্রস-ব্রাউজারের আচরণটি সামঞ্জস্য রয়েছে কিনা তা পরীক্ষা করতে হবে

— অ্যাড্রিয়েন হতে

Answer 6

পৃষ্ঠায় চিত্রের উপাদানগুলি থেকে তথ্যগুলি পুনরুদ্ধার করুন
ক্রোম এবং ফায়ারফক্স
ওয়ার্কিং জেএসফিডে কাজ করছে (ফলাফলটি দেখতে আপনার কনসোলটি খুলুন)

$('img').each(function(){ // selecting all image element on the page

    var img = new Image($(this)); // creating image element

    img.onload = function() { // trigger if the image was loaded
        console.log($(this).attr('src') + ' - done!');
    }

    img.onerror = function() { // trigger if the image wasn't loaded
        console.log($(this).attr('src') + ' - error!');
    }

    img.onAbort = function() { // trigger if the image load was abort
        console.log($(this).attr('src') + ' - abort!');
    }

    img.src = $(this).attr('src'); // pass src to image object

    // log image attributes
    console.log(img.src);
    console.log(img.width);
    console.log(img.height);
    console.log(img.complete);

});

দ্রষ্টব্য: আমি jQuery ব্যবহার করেছি , আমি ভেবেছিলাম এটি পুরো জাভাস্ক্রিপ্টে acheive হতে পারে

আমি এখানে ওপেনক্লাসরুম -> এটি একটি ফরাসী ফোরামের ভাল তথ্য পাই

Answer 7

রিয়েলটাইম নেটওয়ার্ক ডিটেক্টর - পৃষ্ঠাটি রিফ্রেশ না করে নেটওয়ার্কের স্থিতি পরীক্ষা করুন: (এটি jquery নয়, তবে পরীক্ষিত, এবং 100% কাজ করেছে: (ফায়ারফক্স v25.0 এ পরীক্ষিত))

কোড:

<script>
 function ImgLoad(myobj){
   var randomNum = Math.round(Math.random() * 10000);
   var oImg=new Image;
   oImg.src="YOUR_IMAGELINK"+"?rand="+randomNum;
   oImg.onload=function(){alert('Image succesfully loaded!')}
   oImg.onerror=function(){alert('No network connection or image is not available.')}
}
window.onload=ImgLoad();
</script>

<button id="reloadbtn" onclick="ImgLoad();">Again!</button>

যদি সংযোগটি হারিয়ে যায় তবে কেবল আবার বোতামটি টিপুন।

আপডেট 1: পৃষ্ঠাটি রিফ্রেশ না করে স্বয়ংক্রিয়ভাবে সনাক্ত করুন:

<script>
     function ImgLoad(myobj){
       var randomNum = Math.round(Math.random() * 10000);
       var oImg=new Image;
       oImg.src="YOUR_IMAGELINK"+"?rand="+randomNum;
       oImg.onload=function(){networkstatus_div.innerHTML="";}
       oImg.onerror=function(){networkstatus_div.innerHTML="Service is not available. Please check your Internet connection!";}
}

networkchecker = window.setInterval(function(){window.onload=ImgLoad()},1000);
</script>

<div id="networkstatus_div"></div>

Comments

100%! যদি আপনার চিত্রের লিঙ্কটি কোনও প্রক্সি / ফায়ারওয়াল দ্বারা বাধা দেওয়া হয় বা চিত্র সার্ভার সাড়া দিচ্ছে না? আপনার এখনও নেটওয়ার্ক কাজ করছে :)

— সেন জ্যাকব

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

— মারিয়াস বালিয়েটিস

Answer 8

এই পৃষ্ঠায় আকর্ষণীয় সমাধানগুলি পড়ার পরে, আমি একটি সহজ ব্যবহারযোগ্য সমাধান স্ল্যাকস এবং ন্যো পোস্ট দ্বারা প্রভাবিত করে তৈরি করেছি যা মনে হয় ক্রোম, আইই, ফায়ারফক্স, সাফারি এবং সাম্প্রতিক সংস্করণগুলিতে (লেখার মতো) এবং কাজ করছে seems অপেরা (উইন্ডোজ সব) এছাড়াও, এটি আমি ব্যবহৃত আইফোন / আইপ্যাড এমুলেটরটিতে কাজ করে।

এই সমাধান এবং এসএলএক্স এবং নয়োয়ের পোস্টের মধ্যে একটি প্রধান পার্থক্য হ'ল এই সমাধানটি মূলত প্রাকৃতিকউইথ এবং ন্যাচারাল হাইটের বৈশিষ্ট্যগুলি পরীক্ষা করে। আমি খুঁজে পেয়েছি যে বর্তমান ব্রাউজার সংস্করণগুলিতে, এই দুটি বৈশিষ্ট্য সর্বাধিক সহায়ক এবং ধারাবাহিক ফলাফল সরবরাহ করেছে বলে মনে হয়।

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

আপনার একটি জিনিস সম্পর্কে সচেতন হওয়া দরকার যে চিত্রটি 0x0 পিক্সেলের চিত্র হলে এই ফাংশনটিও FALSE ফিরিয়ে দেবে। তবে এই চিত্রগুলি বেশ অস্বাভাবিক, এবং আমি খুব কার্যকর একটি ক্ষেত্রে ভাবতে পারি না যেখানে আপনি 0x0 পিক্সেল চিত্রটি এখনও লোড হয়েছে কিনা তা পরীক্ষা করে দেখতে চান :)

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

HTMLImageElement.prototype.isLoaded = function() {

    // See if "naturalWidth" and "naturalHeight" properties are available.
    if (typeof this.naturalWidth == 'number' && typeof this.naturalHeight == 'number')
        return !(this.naturalWidth == 0 && this.naturalHeight == 0);

    // See if "complete" property is available.
    else if (typeof this.complete == 'boolean')
        return this.complete;

    // Fallback behavior: return TRUE.
    else
        return true;

};

তারপরে, যেকোন সময় যখন আমাদের ইমেজের লোডিংয়ের স্থিতি পরীক্ষা করতে হয়, আমরা কেবল "ইসলয়েড" ফাংশন বলি।

if (someImgElement.isLoaded()) {
    // YAY! The image loaded
}
else {
    // Image has not loaded yet
}

এসএলএক্স 'এবং ন্যো'র পোস্টে জিওরিয়ানের মন্তব্য অনুসারে, আপনি যদি এসআরসি বৈশিষ্ট্য পরিবর্তন করার পরিকল্পনা করেন তবে এই সমাধানটি কেবলমাত্র সাফারি মোবাইলে এককালীন চেক হিসাবে ব্যবহার করা যেতে পারে। তবে আপনি বিদ্যমান চিত্রের উপাদানটিতে এসআরসি বৈশিষ্ট্য পরিবর্তনের পরিবর্তে নতুন এসআরসি বৈশিষ্ট্যযুক্ত একটি চিত্র উপাদান তৈরি করে এটিকে ঘিরে কাজ করতে পারেন।

Answer 9

উপরের পদ্ধতিগুলির সংমিশ্রণটি ব্যবহার করে আমি ক্রস ব্রাউজারে এটির কাজটি করতে পেলাম (ডোমটিতে গতিরূপে চিত্রগুলি সন্নিবেশ করানোর দরকারও ছিল):

$('#domTarget').html('<img src="" />');

var url = '/some/image/path.png';

$('#domTarget img').load(function(){}).attr('src', url).error(function() {
    if ( isIE ) {
       var thisImg = this;
       setTimeout(function() {
          if ( ! thisImg.complete ) {
             $(thisImg).attr('src', '/web/css/img/picture-broken-url.png');
          }
       },250);
    } else {
       $(this).attr('src', '/web/css/img/picture-broken-url.png');
    }
});

দ্রষ্টব্য: আপনাকে আইএসই ভেরিয়েবলের জন্য একটি বৈধ বুলিয়ান রাষ্ট্র সরবরাহ করতে হবে।

Answer 10

var isImgLoaded = function(imgSelector){
  return $(imgSelector).prop("complete") && $(imgSelector).prop("naturalWidth") !== 0;
}

// অথবা প্লাগইন হিসাবে

    $.fn.extend({
      isLoaded: function(){
        return this.prop("complete") && this.prop("naturalWidth") !== 0;
      }
    })

// $(".myImage").isLoaded() 

Answer 11

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

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

সাফারি এবং ক্রোমে, আমি ত্রুটি কনসোলটি সেই চিত্রটির জন্য 404 দেখায় এমনকি ... এবং আমি ইচ্ছাকৃতভাবে এই চিত্রটি পরীক্ষার জন্য সরিয়ে দিয়েছি, এমনকি আমি ডটকম কমপ্লিট সত্য এবং প্রাকৃতিকপথ সেটটি দেখতে পাচ্ছি। তবে উপরেরগুলি ফায়ারফক্স এবং আইই এর জন্য ভাল কাজ করে।

Comments

হুঁ, এটি আকর্ষণীয়। একটি কোড উদাহরণ পোস্ট করতে আপত্তি করতে চাই তাই আমি কয়েকটি জিনিস চেষ্টা করে দেখতে চাই?

— জাভি

Answer 12

কোডের এই স্নিপেটটি ব্রাউজারের ক্যাচিংয়ের সমস্যাগুলি ঠিক করতে আমাকে সহায়তা করেছিল:

$("#my_image").on('load', function() {

    console.log("image loaded correctly"); 
}).each(function() {

     if($(this).prop('complete')) $(this).load();
});

যখন ব্রাউজার ক্যাশে অক্ষম থাকে কেবলমাত্র এই কোডটি কাজ করে না:

$("#my_image").on('load', function() {
     console.log("image loaded correctly"); 
})

এটি কাজ করতে আপনাকে যুক্ত করতে হবে:

.each(function() {
     if($(this).prop('complete')) $(this).load();
});

Answer 13

এই JavaScriptকোডটি ব্যবহার করে আপনি চেক করতে পারবেন চিত্রটি সফলভাবে লোড হয়েছে কিনা।

document.onready = function(e) {
        var imageobj = new Image();
        imageobj.src = document.getElementById('img-id').src;
        if(!imageobj.complete){ 
            alert(imageobj.src+"  -  Not Found");
        }
}

এটি চেষ্টা করে দেখুন

Answer 14

কোনও চিত্র এবং ইভেন্টলিস্টনার সম্পূর্ণ লোড নিয়ে আমার অনেক সমস্যা হয়েছিল।

আমি যা কিছু চেষ্টা করেছি, ফলাফল নির্ভরযোগ্য ছিল না।

তবে আমি সমাধানটি খুঁজে পেলাম। এটি টেকনিক্যালি খুব সুন্দর নয়, তবে এখন আমার কোনও ব্যর্থ ইমেজ বোঝা হয়নি।

আমি কি করেছিলাম:

                    document.getElementById(currentImgID).addEventListener("load", loadListener1);
                    document.getElementById(currentImgID).addEventListener("load", loadListener2);

                function loadListener1()
                    {
                    // Load again
                    }

                function loadListener2()
                {
                    var btn = document.getElementById("addForm_WithImage"); btn.disabled = false;
                    alert("Image loaded");
                }

চিত্রটি একবারে লোড করার পরিবর্তে, আমি এটি প্রথমবারের পরে দ্বিতীয়বার সরাসরি লোড করি এবং ইভেন্ট হ্যান্ডলার উভয়েই ট্রাট চালাই।

আমার সমস্ত মাথাব্যথা চলে গেছে!

---

যাইহোক, আপনি স্ট্যাকওভারফ্লো থেকে ছেলেরা আমাকে ইতিমধ্যে আরও শতাধিকবার সাহায্য করেছেন। এই জন্য একটি খুব বড় আপনাকে ধন্যবাদ!

Answer 15

এই আমার জন্য ভাল কাজ করেছেন :)

$('.progress-image').each(function(){
    var img = new Image();
    img.onload = function() {
        let imgSrc = $(this).attr('src');
        $('.progress-image').each(function(){
            if($(this).attr('src') == imgSrc){
                console.log($(this).parent().closest('.real-pack').parent().find('.shimmer').fadeOut())
            }
        })
    }
    img.src = $(this).attr('src');
});