আমার একটি ওয়েব পৃষ্ঠা রয়েছে যাতে একগুচ্ছ চিত্র রয়েছে includes কখনও কখনও চিত্র উপলব্ধ হয় না, তাই একটি ভাঙা চিত্র ক্লায়েন্টের ব্রাউজারে প্রদর্শিত হয়।
আমি কীভাবে ছবিগুলির সেট পেতে jQuery ব্যবহার করব, এটি ভাঙ্গা চিত্রগুলিতে ফিল্টার করব তারপরে src প্রতিস্থাপন করুন?
- আমি ভেবেছিলাম jQuery দিয়ে এটি করা সহজ হবে তবে এটি কেবল খাঁটি জাভাস্ক্রিপ্ট সমাধানটি ব্যবহার করা সহজতর হয়েছে, যা প্রেস্টাউলের দ্বারা সরবরাহ করা।
উত্তর:
হ্যান্ডেল onErrorজাভাস্ক্রিপ্ট ব্যবহার উৎস reassign করতে চিত্রের জন্য ইভেন্ট:
function imgError(image) {
image.onerror = "";
image.src = "/images/noimage.gif";
return true;
}<img src="image.png" onerror="imgError(this);"/>বা একটি জাভাস্ক্রিপ্ট ফাংশন ছাড়াই:
<img src="image.png" onError="this.onerror=null;this.src='/images/noimage.gif';" />নিম্নলিখিত সামঞ্জস্যতা সারণী ত্রুটি সুবিধা সমর্থন করে এমন ব্রাউজারগুলি তালিকাভুক্ত করে:
আমি অন্তর্নির্মিত errorহ্যান্ডলারটি ব্যবহার করি :
$("img").error(function () {
$(this).unbind("error").attr("src", "broken.gif");
});সম্পাদনা:error() পদ্ধতিতে অননুমোদিত jQuery 1.8 এবং উচ্চতর। পরিবর্তে, আপনার .on("error")পরিবর্তে ব্যবহার করা উচিত :
$("img").on("error", function () {
$(this).attr("src", "broken.gif");
});আমার মতো কেউ যদি errorঘটনাটিকে একটি গতিশীল এইচটিএমএল imgট্যাগের সাথে সংযুক্ত করার চেষ্টা করে , আমি তা উল্লেখ করতে চাই, একটি ক্যাচ আছে:
স্পষ্টতই imgত্রুটির ঘটনাগুলি বেশিরভাগ ব্রাউজারগুলিতে বুদবুদ হয় না , মান যা বলে তার বিপরীতে ।
সুতরাং, নীচের মতো কিছু কাজ করবে না :
$(document).on('error', 'img', function () { ... })আশা করি এটি অন্য কারও পক্ষে সহায়ক হবে। আমি যদি এই থ্রেড এ এখানে দেখতে পেতাম। কিন্তু, আমি করিনি। সুতরাং, আমি এটি যুক্ত করছি
এখানে একটি স্বতন্ত্র সমাধান:
$(window).load(function() {
$('img').each(function() {
if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
// image was broken, replace with your new image
this.src = 'http://www.tranism.com/weblog/images/broken_ipod.gif';
}
});
});$.browserএখন অবহেলা করা হয়েছে এবং সরানো হয়েছে, পরিবর্তে বৈশিষ্ট্য সনাক্তকরণ ব্যবহার করুন (এই ক্ষেত্রে আরও জটিল হয়ে ওঠে )।
204 No Contentদেয় তখন এটি একটি ভাঙা চিত্র হবে।
আমি বিশ্বাস করি এটিই আপনার পরে: jQuery.Preload
এখানে ডেমো থেকে উদাহরণ কোডটি দেওয়া হয়েছে, আপনি লোডিং নির্দিষ্ট করেছেন এবং পাওয়া যায়নি চিত্রগুলি এবং আপনি সমস্ত প্রস্তুত:
$('#images img').preload({
placeholder:'placeholder.jpg',
notFound:'notfound.jpg'
});$(window).bind('load', function() {
$('img').each(function() {
if((typeof this.naturalWidth != "undefined" &&
this.naturalWidth == 0 )
|| this.readyState == 'uninitialized' ) {
$(this).attr('src', 'missing.jpg');
}
}); })সূত্র: http://www.developria.com/2009/03/jquery-quickie---broken-images.html
যখন ওপেন এসআরসি প্রতিস্থাপনের দিকে তাকাচ্ছিল, আমি নিশ্চিত যে এই প্রশ্নটিতে আঘাতকারী অনেকেই কেবল ভাঙা চিত্রটি লুকিয়ে রাখতে চাইবেন, সেক্ষেত্রে এই সাধারণ সমাধানটি আমার পক্ষে দুর্দান্ত কাজ করেছে।
<img src="img.jpg" onerror="this.style.display='none';" />var images = document.querySelectorAll('img');
for (var i = 0; i < images.length; i++) {
images[i].onerror = function() {
this.style.display='none';
}
}<img src='img.jpg' />document.querySelectorAll('img').forEach((img) => {
img.onerror = function() {
this.style.display = 'none';
}
});<img src='img.jpg' />নোটলিস্ট.ফোর প্রতিটি এবং তীর ফাংশনের জন্য ব্রাউজার সমর্থন দেখুন ।
সমস্ত ভাঙা চিত্র প্রতিস্থাপনের জন্য এখানে দ্রুত এবং নোংরা উপায় রয়েছে এবং এইচটিএমএল কোডটি পরিবর্তন করার দরকার নেই;)
$("img").each(function(){
var img = $(this);
var image = new Image();
image.src = $(img).attr("src");
var no_image = "https://dummyimage.com/100x100/7080b5/000000&text=No+image";
if (image.naturalWidth == 0 || image.readyState == 'uninitialized'){
$(img).unbind("error").attr("src", no_image).css({
height: $(img).css("height"),
width: $(img).css("width"),
});
}
});আমার প্রয়োজন অনুসারে আমি কোনও স্ক্রিপ্ট পেলাম না, তাই আমি ভাঙ্গা চিত্রগুলি পরীক্ষা করার জন্য একটি পুনরাবৃত্ত ফাংশন করেছি এবং সেগুলি স্থির না হওয়া পর্যন্ত প্রতি চার সেকেন্ডে এগুলি পুনরায় লোড করার চেষ্টা করেছি।
আমি এটি 10 টি প্রচেষ্টার মধ্যে সীমাবদ্ধ করেছি যেন এটি লোড না হয়ে থাকে তবে চিত্রটি সার্ভারে উপস্থিত নাও হতে পারে এবং ফাংশনটি অসীম লুপে প্রবেশ করবে। আমি এখনও পরীক্ষা করছি। এটিকে টুইট করতে নির্দ্বিধায় :)
var retries = 0;
$.imgReload = function() {
var loaded = 1;
$("img").each(function() {
if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
var src = $(this).attr("src");
var date = new Date();
$(this).attr("src", src + "?v=" + date.getTime()); //slightly change url to prevent loading from cache
loaded =0;
}
});
retries +=1;
if (retries < 10) { // If after 10 retries error images are not fixed maybe because they
// are not present on server, the recursion will break the loop
if (loaded == 0) {
setTimeout('$.imgReload()',4000); // I think 4 seconds is enough to load a small image (<50k) from a slow server
}
// All images have been loaded
else {
// alert("images loaded");
}
}
// If error images cannot be loaded after 10 retries
else {
// alert("recursion exceeded");
}
}
jQuery(document).ready(function() {
setTimeout('$.imgReload()',5000);
});আপনি এর জন্য গিটহাবের নিজস্ব আনয়ন ব্যবহার করতে পারেন:
সম্মুখভাগ: https://github.com/github/fetch
বা ব্যাকএন্ডের জন্য, একটি নোড.জেএস সংস্করণ: https://github.com/bitinn/node-fetch
fetch(url)
.then(function(res) {
if (res.status == '200') {
return image;
} else {
return placeholder;
}
}সম্পাদনা করুন: এই পদ্ধতিটি এক্সএইচআর প্রতিস্থাপন করতে চলেছে এবং সম্ভবত ইতিমধ্যে Chrome এ রয়েছে। ভবিষ্যতে যে কারও কাছে এটি পড়ার জন্য, আপনাকে সম্ভবত উল্লিখিত লাইব্রেরি অন্তর্ভুক্ত করার দরকার নেই।
এটি জাভাস্ক্রিপ্ট, ক্রস ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ হওয়া উচিত এবং কুৎসিত মার্কআপ ব্যতীত বিতরণ করা উচিত onerror="":
var sPathToDefaultImg = 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
validateImage = function( domImg ) {
oImg = new Image();
oImg.onerror = function() {
domImg.src = sPathToDefaultImg;
};
oImg.src = domImg.src;
},
aImg = document.getElementsByTagName( 'IMG' ),
i = aImg.length;
while ( i-- ) {
validateImage( aImg[i] );
}while (i--)
কফিস্ক্রিপ্ট বৈকল্পিক:
আমি এটি টার্বোলিংকসের সাথে একটি সমস্যা সমাধানের জন্য তৈরি করেছি যার ফলে ফায়ারফক্সে .error () পদ্ধতি উত্থাপিত হতে পারে মাঝে মাঝে চিত্রটি সত্যই থাকে is
$("img").error ->
e = $(@).get 0
$(@).hide() if !$.browser.msie && (typeof this.naturalWidth == "undefined" || this.naturalWidth == 0)প্রস্টাউলের উত্তরটি ব্যবহার করে , আমি কিছু চেক যুক্ত করেছি এবং আমি jQuery উপায় ব্যবহার করতে পছন্দ করি।
<img src="image1.png" onerror="imgError(this,1);"/>
<img src="image2.png" onerror="imgError(this,2);"/>
function imgError(image, type) {
if (typeof jQuery !== 'undefined') {
var imgWidth=$(image).attr("width");
var imgHeight=$(image).attr("height");
// Type 1 puts a placeholder image
// Type 2 hides img tag
if (type == 1) {
if (typeof imgWidth !== 'undefined' && typeof imgHeight !== 'undefined') {
$(image).attr("src", "http://lorempixel.com/" + imgWidth + "/" + imgHeight + "/");
} else {
$(image).attr("src", "http://lorempixel.com/200/200/");
}
} else if (type == 2) {
$(image).hide();
}
}
return true;
}আপনি যদি এর imgসাথে সন্নিবেশ করিয়ে থাকেন innerHTML, যেমন: এর মতো $("div").innerHTML = <img src="wrong-uri">ব্যর্থ হলে আপনি অন্য চিত্রটি লোড করতে পারেন, উদাহরণস্বরূপ:
<script>
function imgError(img) {
img.error="";
img.src="valid-uri";
}
</script>
<img src="wrong-uri" onerror="javascript:imgError(this)">কেন javascript: _দরকার? স্ক্রিপ্টগুলি স্ক্রিপ্ট ট্যাগের মাধ্যমে ডিওমে ইনজেক্ট করা স্ক্রিপ্টগুলি ইনজেকশনের innerHTMLসময় চালানো হয় না, তাই আপনাকে স্পষ্ট করতে হবে।
এই অন্যান্য এসও পোস্টটি দেখার সময় আমি এই পোস্টটি পেয়েছি । নীচে আমি সেখানে দেওয়া উত্তরের একটি অনুলিপি দিচ্ছি।
আমি জানি এটি একটি পুরানো থ্রেড, তবে প্রতিক্রিয়াটি জনপ্রিয় হয়ে উঠেছে এবং সম্ভবত, প্রতিক্রিয়া ব্যবহারকারী কেউ একই সমস্যার উত্তর খুঁজতে এখানে আসবেন।
সুতরাং, আপনি যদি প্রতিক্রিয়া ব্যবহার করে থাকেন তবে আপনি নীচের মতো কিছু করতে পারেন যা প্রতিক্রিয়ার টিমের বেন আল্পার্ট এখানে সরবরাহ করেছিলেন একটি উত্তর মূল was
getInitialState: function(event) {
return {image: "http://example.com/primary_image.jpg"};
},
handleError: function(event) {
this.setState({image: "http://example.com/failover_image.jpg"});
},
render: function() {
return (
<img onError={this.handleError} src={src} />;
);
}আমি "অনারর" ইভেন্টটি ব্যবহার করে ভাঙা চিত্রটি প্রতিস্থাপনের জন্য একটি ফিডল তৈরি করেছি । এটি আপনাকে সাহায্য করতে পারে।
//the placeholder image url
var defaultUrl = "url('https://sadasd/image02.png')";
$('div').each(function(index, item) {
var currentUrl = $(item).css("background-image").replace(/^url\(['"](.+)['"]\)/, '$1');
$('<img>', {
src: currentUrl
}).on("error", function(e) {
$this = $(this);
$this.css({
"background-image": defaultUrl
})
e.target.remove()
}.bind(this))
})এখানে জকিউয়ারি দ্বারা মোড়ানো HTML5 চিত্রের অবজেক্টটি ব্যবহার করার একটি উদাহরণ রয়েছে। প্রাথমিক চিত্রের URL টির জন্য লোড ফাংশনটি কল করুন এবং যদি সেই লোডটি ত্রুটির কারণ হয়ে থাকে, তবে ব্যাকআপ URL সহ চিত্রের src বৈশিষ্ট্যটি প্রতিস্থাপন করুন।
function loadImageUseBackupUrlOnError(imgId, primaryUrl, backupUrl) {
var $img = $('#' + imgId);
$(new Image()).load().error(function() {
$img.attr('src', backupUrl);
}).attr('src', primaryUrl)
}
<img id="myImage" src="primary-image-url"/>
<script>
loadImageUseBackupUrlOnError('myImage','primary-image-url','backup-image-url');
</script>খাঁটি জেএস। আমার কাজটি ছিল: যদি 'bl-একবার.png' চিত্রটি খালি থাকে -> অ্যারে তালিকা থেকে (বর্তমান দিরের মধ্যে) প্রথমটি (যার 404 স্থিতি নেই) চিত্রটি সন্নিবেশ করান:
<img src="http://localhost:63342/GetImage/bl-once.png" width="200" onerror="replaceEmptyImage.insertImg(this)">সম্ভবত এটির উন্নতি করা দরকার তবে:
var srcToInsertArr = ['empty1.png', 'empty2.png', 'needed.png', 'notActual.png']; // try to insert one by one img from this array
var path;
var imgNotFounded = true; // to mark when success
var replaceEmptyImage = {
insertImg: function (elem) {
if (srcToInsertArr.length == 0) { // if there are no more src to try return
return "no-image.png";
}
if(!/undefined/.test(elem.src)) { // remember path
path = elem.src.split("/").slice(0, -1).join("/"); // "http://localhost:63342/GetImage"
}
var url = path + "/" + srcToInsertArr[0];
srcToInsertArr.splice(0, 1); // tried 1 src
if(imgNotFounded){ // while not success
replaceEmptyImage.getImg(url, path, elem); // CALL GET IMAGE
}
},
getImg: function (src, path, elem) { // GET IMAGE
if (src && path && elem) { // src = "http://localhost:63342/GetImage/needed.png"
var pathArr = src.split("/"); // ["http:", "", "localhost:63342", "GetImage", "needed.png"]
var name = pathArr[pathArr.length - 1]; // "needed.png"
xhr = new XMLHttpRequest();
xhr.open('GET', src, true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.status == 200) {
elem.src = src; // insert correct src
imgNotFounded = false; // mark success
}
else {
console.log(name + " doesn't exist!");
elem.onerror();
}
}
}
}
};সুতরাং এটি আমার এসআরসি-তে সঠিক 'প্রয়োজনীয়.png' বা বর্তমান দির থেকে 'no-image.png' সন্নিবেশ করবে।
এর চেয়ে আরও ভাল উপায় আছে কিনা তা সম্পর্কে আমি নিশ্চিত নই, তবে এটির জন্য আমি একটি হ্যাকের কথা ভাবতে পারি - আপনি আজাক্স img URL- এ পোস্ট করতে পারেন এবং চিত্রটি আসলে ফিরে এসেছিল কিনা তা দেখার জন্য প্রতিক্রিয়াটিকে পার্স করতে পারেন। যদি এটি 404 বা অন্য কিছু হিসাবে ফিরে আসে তবে img অদলবদল করুন। যদিও আমি এটি বেশ ধীর হতে আশা করি।
আমি এই দুটি সাধারণ ফাংশন দিয়ে আমার সমস্যার সমাধান করেছি:
function imgExists(imgPath) {
var http = jQuery.ajax({
type:"HEAD",
url: imgPath,
async: false
});
return http.status != 404;
}
function handleImageError() {
var imgPath;
$('img').each(function() {
imgPath = $(this).attr('src');
if (!imgExists(imgPath)) {
$(this).attr('src', 'images/noimage.jpg');
}
});
}jQuery 1.8
// If missing.png is missing, it is replaced by replacement.png
$( "img" )
.error(function() {
$( this ).attr( "src", "replacement.png" );
})
.attr( "src", "missing.png" );jQuery 3
// If missing.png is missing, it is replaced by replacement.png
$( "img" )
.on("error", function() {
$( this ).attr( "src", "replacement.png" );
})
.attr( "src", "missing.png" );আমি ঘটনা প্রতিনিধিদল এবং ইভেন্টে ক্যাপচার সঙ্গে আরো একটি মার্জিত উপায় আছে window's errorযখন ব্যাকআপ চিত্রটি লোড করতে ব্যর্থ এমনকি।
img {
width: 100px;
height: 100px;
}<script>
window.addEventListener('error', windowErrorCb, {
capture: true
}, true)
function windowErrorCb(event) {
let target = event.target
let isImg = target.tagName.toLowerCase() === 'img'
if (isImg) {
imgErrorCb()
return
}
function imgErrorCb() {
let isImgErrorHandled = target.hasAttribute('data-src-error')
if (!isImgErrorHandled) {
target.setAttribute('data-src-error', 'handled')
target.src = 'backup.png'
} else {
//anything you want to do
console.log(target.alt, 'both origin and backup image fail to load!');
}
}
}
</script>
<img id="img" src="error1.png" alt="error1">
<img id="img" src="error2.png" alt="error2">
<img id="img" src="https://i.stack.imgur.com/ZXCE2.jpg" alt="avatar">এই পয়েন্ট টি :
কোডটি এতে রাখুন headএবং প্রথম ইনলাইন স্ক্রিপ্ট হিসাবে কার্যকর করা হবে। সুতরাং, এটি স্ক্রিপ্টের পরে ঘটে যাওয়া ত্রুটিগুলি শুনবে।
ত্রুটিগুলি ধরার জন্য ইভেন্ট ক্যাপচার ব্যবহার করুন, বিশেষত যে ইভেন্টগুলি বুদবুদ নয়।
ইভেন্ট প্রতিনিধি ব্যবহার করুন যা প্রতিটি চিত্রের উপর বাধ্যতামূলক ইভেন্টগুলি এড়ায়।
নীচের মত এবং পরবর্তী অসীম লুপটি গায়েব হতে না imgদেওয়ার জন্য ত্রুটির উপাদানটিকে একটি বৈশিষ্ট্য দিন :backup.pngbackup.png
img ত্রুটি-> ব্যাকআপ.png-> ত্রুটি-> ব্যাকআপ.পিএনজি-> ত্রুটি -> ,,,,,
let isImgErrorHandled = target.src === 'backup.png';এটি কিছুটা সরলকরণ হিসাবে ব্যবহার করা।
target.src='backup.png'তবে পরের বার console.log(target.src)হতে পারে নাbackup.png
;(window.jQuery || window.Zepto).fn.fallback = function (fallback) {
return this.one('error', function () {
var self = this;
this.src = (fallback || 'http://lorempixel.com/$width/$height')
.replace(/\$(\w+)/g, function (m, t) { return self[t] || ''; });
});
};আপনি কোনও স্থানধারক পথটি অতিক্রম করতে পারেন এবং এতে ব্যর্থ চিত্রের অবজেক্ট থেকে সমস্ত বৈশিষ্ট্য অ্যাক্সেস করতে পারেন $*:
$('img').fallback('http://dummyimage.com/$widthx$height&text=$src');বছরের পর বছর এটি আমাকে হতাশ করছে। আমার সিএসএস ফিক্স একটিতে একটি পটভূমি চিত্র সেট করে img। যখন একটি গতিশীল চিত্র srcঅগ্রভাগে লোড হয় না, একটি স্থানধারক এর বিগ এ দৃশ্যমান img। এই কাজ করে আপনার ছবি একটি ডিফল্ট আকার (যেমন height, min-height, widthএবং / অথবা min-width)।
আপনি ভাঙা চিত্র আইকন দেখতে পাবেন তবে এটি একটি উন্নতি। সফলভাবে IE9 এ পরীক্ষিত। আইওএস সাফারি এবং ক্রোম এমনকি একটি ভাঙা আইকনও দেখায় না।
.dynamicContainer img {
background: url('/images/placeholder.png');
background-size: contain;
}srcকোনও ব্যাকগ্রাউন্ড ফ্লিকার ছাড়াই লোড দেওয়ার জন্য সময় দিতে অল্প অ্যানিমেশন যুক্ত করুন । ক্রোমটি সহজেই পটভূমিতে ফিকে হয়ে যায় তবে ডেস্কটপ সাফারি হয় না।
.dynamicContainer img {
background: url('/images/placeholder.png');
background-size: contain;
-webkit-animation: fadein 1s;
animation: fadein 1s;
}
@-webkit-keyframes fadein {
0% { opacity: 0.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}
@keyframes fadein {
0% { opacity: 0.0; }
50% { opacity: 0.5; }
100% { opacity: 1.0; }
}যদি চিত্রটি লোড করা যায় না (উদাহরণস্বরূপ, কারণ এটি সরবরাহ করা ইউআরএল উপস্থিত নয়), চিত্র URL টি ডিফল্ট রূপে পরিবর্তিত হবে,
.Error () সম্পর্কে আরও তথ্যের জন্য
$('img').on('error', function (e) {
$(this).attr('src', 'broken.png');
});আমি একই সমস্যা পেয়েছি। এই কোডটি আমার ক্ষেত্রে ভাল কাজ করে।
// Replace broken images by a default img
$('img').each(function(){
if($(this).attr('src') === ''){
this.src = '/default_feature_image.png';
}
});কখনও কখনও errorইভেন্টটি ব্যবহার করা সম্ভব হয় না, যেমন আপনি ইতিমধ্যে লোড হওয়া পৃষ্ঠায় এমন কিছু করার চেষ্টা করছেন যেমন আপনি যখন কনসোল, বুকমার্কলেট, বা অ্যাসিঙ্ক্রোনালি লোড স্ক্রিপ্টের মাধ্যমে কোড চালাচ্ছেন। সেক্ষেত্রে, এটি পরীক্ষা করে img.naturalWidthএবংimg.naturalHeightসেক্ষেত্রে এটি 0 এটি 0 টি কৌশলটি মনে হয়।
উদাহরণস্বরূপ, কনসোল থেকে সমস্ত ভাঙা চিত্রগুলি পুনরায় লোড করার জন্য এখানে একটি স্নিপেট রয়েছে:
$$("img").forEach(img => {
if (!img.naturalWidth && !img.naturalHeight) {
img.src = img.src;
}
}আমি এটি সর্বোত্তমভাবে কাজ করতে দেখতে পেয়েছি, যদি কোনও চিত্র প্রথমবার লোড করতে ব্যর্থ হয়, তবে এটি ডিওএম থেকে পুরোপুরি সরানো হবে। এক্সিকিউটিং console.clear()কনসোল উইন্ডোকে পরিষ্কার রাখে, যেহেতু চেষ্টা / ক্যাপ ব্লক দিয়ে 404 ত্রুটি বাদ দেওয়া যায় না।
$('img').one('error', function(err) {
// console.log(JSON.stringify(err, null, 4))
$(this).remove()
console.clear()
})