এসসিআর উত্স চিত্রটি পাওয়া না গেলে কীভাবে চুপচাপ "চিত্র পাওয়া যায় না" আইকনটি লুকিয়ে রাখবেন

Question

আপনি কী জানেন কীভাবে কোনও চিত্র ফাইল পাওয়া যায় না যখন একটি রেন্ডার এইচটিএমএল পৃষ্ঠা থেকে ক্লাসিক "চিত্র পাওয়া যায় না" আইকনটি কীভাবে আড়াল করবেন ?

জাভাস্ক্রিপ্ট / jQuery / CSS ব্যবহার করে কোন কার্য পদ্ধতি?

Comments

অ্যান্ডির উত্তরটি সঠিক, তবে আপনি পরিবর্তে স্টাইল.ভেসিবিলিটি ব্যবহার করতে চাইতে পারেন। আপনি যদি দৃশ্যমানতা সেট করে থাকেন তবে উপাদানটি এখনও আপনার দস্তাবেজে তার স্পেস রেখে দেয়, এইভাবে কোনও মজার নথির নড়াচড়া নেই।

— খ্রিস্টান

আমি বিন্দু দেখতে পাচ্ছি না। আপনার এইচটিএমএল কোড থেকে কোনও বিদ্যমান রিসোর্স পৌঁছানোর চেষ্টা করার কথা নয়। খারাপ চুক্তি করা রিসোর্সগুলি গোপন করার জন্য জাভাস্ক্রিপ্ট ব্যবহার করা আমার কাছে একটি কুৎসিত সমাধান বলে মনে হচ্ছে।

— বরিস ডেলোরমাস

@ কাভিয়ার আপনি পয়েন্টটি মিস করছেন images স্ট্যাক ওভারফ্লোতে পোস্টের সময়ে চিত্রগুলি উপলভ্য হতে পারে এই কারণে এখানে প্রচুর হটলিঙ্কযুক্ত চিত্রগুলি নষ্ট হয়েছে তবে কিছু মাস পরে অনুপলব্ধ। এই চিত্রগুলি নীরবে এবং আলতো করে লুকানো আছে।

— পদ্ধতিতে u

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

— অ্যান্ডি ই

@ সিস্টিম্প্যান্টআউট: ফায়ারফক্স এটির সাথে কীভাবে কাজ করে সে সম্পর্কে আমি আরও কিছু তথ্য পেয়েছি। একটি আপডেট হওয়া ফ্রিডল এবং [মালিকানার সিউডো-ক্লাস, :-moz-broken] দেখুন ( বিকাশকারী.মোজিলা.আর.ইন / সিএসএস /:- মোজ-ব্রোকেন )। আমি কেবল আগে ভাবছিলাম যে ছদ্ম শ্রেণি ভাঙা চিত্রগুলি স্টাইল করার জন্য কার্যকর হবে।

— অ্যান্ডি ই

Answer 1

আপনি onerrorযখন জাভাস্ক্রিপ্টে ইভেন্টটি ব্যবহার করতে পারেন তখন কোনও চিত্র লোড হতে ব্যর্থ হয়:

var img = document.getElementById("myImg");
img.onerror = function () { 
    this.style.display = "none";
}

JQuery এ (যেহেতু আপনি জিজ্ঞাসা করেছেন):

$("#myImg").error(function () { 
    $(this).hide(); 
});

বা সমস্ত চিত্রের জন্য:

$("img").error(function () { 
    $(this).hide();
    // or $(this).css({visibility:"hidden"}); 
});

চিত্রগুলি লুকিয়ে রাখলে বিন্যাসটি বদলে যেতে পারে তার visibility: hiddenপরিবর্তে আপনার ব্যবহার করা উচিত .hide()। ওয়েবে অনেক সাইট srcউল্লিখিত চিত্রের অবস্থানটি অনুপলব্ধ থাকে যখন সেই চিত্রটির বৈশিষ্ট্যটি নির্দেশ করে পরিবর্তে একটি ডিফল্ট "কোনও চিত্র নয়" চিত্র ব্যবহার করে ।

Comments

অ্যান্ডি - সমস্ত চিত্র প্রয়োগ করার 'গ্লোবাল' সমাধান কী হবে ?? আমি ভাবছিলাম এটি যদি খুব সহজেই ঘটেছিল তবে তারা সবাই একই

— বিভাগে থাকত

@ জে অ্যান্ডি: আমি নিশ্চিত যে এটি ছিল, তবে আপনার মন্তব্য আমাকে ডাবল-চেক করেছে। একটি তাত্ক্ষণিক গুগল ক্রস ব্রাউজার সমর্থন সূচিত করে এই ডাব্লু 3 স্কুল স্কুলটি ফেরত দিয়েছে (দুঃখিত, ডেভিড, আপনি যদি এটি পড়ছেন)।

— অ্যান্ডি ই

@ জিম: আপনি যদি jQuery ব্যবহার করেন তবে আপনি সমস্ত চিত্রগুলিতে ইভেন্টটি প্রয়োগ করতে পারেন। শুধু ট্যাগ নির্বাচক ব্যবহার করুন, যেমন $("img").error(function () { /*...*/ });।

— অ্যান্ডি ই

@ অ্যান্ডি ই: ভাল লাগছে, +1। পরবর্তী আকর্ষণীয় প্রশ্নটি errorহ'ল live()বা এর সাথে " " বাউন্ডেবল delegate()।

— জানুয়ারী

visibilityআরও ভাল হবে, যেহেতু displayবিন্যাসটি ভাঙ্গতে পারে।

— gblazex

Answer 2

<img onerror='this.style.display = "none"'>

Comments

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

— সিস্টেমে

দুর্দান্ত, আমার যা প্রয়োজন ছিল সরল এবং অবরুদ্ধ, এটি একটি টেম্পলেট ফিট!

— সর্বোচ্চ

যদিও ইতিমধ্যে বেশ পুরানো, এটি দুর্দান্ত! আমার এখন লুকানো চিত্রটির চারপাশে <a> ট্যাগগুলিও লুকানোর কোনও উপায় আছে?

— এসজেডিএস

Answer 3

গ্যারি উইলব্বির প্রস্তাবিত সমাধানটি আমি কিছুটা সংশোধন করেছি, কারণ এটি সংক্ষেপে ভাঙা চিত্রের আইকনটি দেখায়। আমার সমাধান:

    <img src="..." style="display: none" onload="this.style.display=''">

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

Comments

... এবং জাভাস্ক্রিপ্ট অক্ষম করা থাকলে ব্যবহারকারীরা কিছুই দেখতে পাবেন না!

— ইয়াকার্ট

@ ইয়াকার্ট ওয়েল, যদি ব্যবহারকারীদের জাভাস্ক্রিপ্ট অক্ষম করা থাকে তবে বেশিরভাগ দরকারী ওয়েব অ্যাপ্লিকেশনগুলি যেভাবেই চলবে না ...

— অবাক

<img src="..." onerror="this.style.display = 'none'"/>অর্ধ-লোড এবং নন-জেএস ব্রাউজারের ক্ষেত্রে আরও ভাল কাজ করতে পারে?

Answer 4

প্রতিটি চিত্রের ত্রুটিটি আড়াল করার জন্য, কেবল আপনার পৃষ্ঠার নীচে এই জাভাস্ক্রিপ্ট যুক্ত করুন (বডি ট্যাগের ঠিক আগে):

(function() {
    var allimgs = document.images;
    for (var i = 0; i < allimgs.length; i++) {
        allimgs[i].onerror = function() {
            this.style.visibility = "hidden"; // Other elements aren't affected. 
        }
    }
})();

Comments

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

— গ্যালাটিস

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

— আদমজ

এটি আসল প্রশ্নের উত্তর দেয়, তবে এটি একমুখী প্রক্রিয়া। পরবর্তীকালে আবার দৃশ্যমান লোড হওয়া চিত্রগুলি তৈরি করতে, একটি লোড ইভেন্টও যুক্ত করুন। allimgs [i] .onload = ফাংশন () {this.style.visibility = "দৃশ্যমান"; };

— টিআরটি 1968

Answer 5

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

Answer 6

অ্যান্ডি ই এর উত্তর সম্পর্কে একটি দ্রুত গবেষণা করছেন , এটি live()বাঁধাই সম্ভব নয় error।

// won't work (chrome 5)
$('img').live('error', function(){
     $(this).css('visibility', 'hidden');
});

সুতরাং আপনি মত যেতে হবে

$('<img/>', {
  src:    'http://www.notarget.com/fake.jpg',
  error:  function(e){
    $(this).css('visibility', 'hidden');
  }
}).appendTo(document.body);

error event handlerএকটি নতুন উপাদান তৈরি করার জন্য সরাসরি বাঁধাই ।

Comments

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

— Andy E

@ অ্যান্ডি ই: হ্যাঁ, তারা ইতিমধ্যে সিদ্ধান্ত নিয়েছে যে, একই ধরণের কাজ করার জন্য ধারণাগুলির মধ্যে সবচেয়ে খারাপ হতে পারে না error। nice to haveআমার জন্য একটি মত শোনাচ্ছে ।

— jAndy

Answer 7

আমি ঠিক এটি করার জন্য একটি নিফটি পদ্ধতি পেয়েছি, যখন এখনও ng-srcAngular.js এ নির্দেশনা ব্যবহার করার সময় কার্যকর হয় এবং ...

<img
  ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
  onerror="this.src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='"
  />

এটি মূলত একটি স্বল্পতম স্বচ্ছ জিআইএফ (যেমনটি দেখা গেছে http://proger.i-forge.net/%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82% D0% B5% D1% 80 / [20121112]% 20The% 20 ক্ষুদ্রতম% 20% ট্রান্সপোর্টেন্ট% 20 পিক্সেল এইচটিএমএল )

অবশ্যই এই জিআইএফ কিছু বৈশ্বিক পরিবর্তনশীল এর ভিতরে রাখা যেতে পারে যাতে এটি টেমপ্লেটগুলিকে বিশৃঙ্খলা না করে।

<script>
  window.fallbackGif = "..."
</script>

আর ব্যবহার করুন

<img
  ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
  onerror="this.src=fallbackGif"
  />

ইত্যাদি

Answer 8

শুধু সহজ সিএসএস ব্যবহার করুন

.AdminImageHolder {
display: inline-block;
min-width: 100px;
max-width: 100px;
min-height: 100px;
max-height: 100px;
background: url(img/100x100.png) no-repeat;
border: 1px solid #ccc;
}