मेरे पास एक वेब पेज है जिसमें छवियों का एक समूह शामिल है। कभी-कभी छवि उपलब्ध नहीं होती है, इसलिए क्लाइंट के ब्राउज़र में एक टूटी हुई छवि प्रदर्शित होती है।
मैं छवियों के सेट को पाने के लिए jQuery का उपयोग कैसे करूं, इसे टूटी हुई छवियों को फ़िल्टर करें फिर src को बदलें?
- मुझे लगा कि jQuery के साथ ऐसा करना आसान होगा, लेकिन शुद्ध जावास्क्रिप्ट समाधान का उपयोग करना बहुत आसान हो गया है, अर्थात्, जो प्रेस्टीएल द्वारा प्रदान किया गया है।
जवाबों:
onErrorजावास्क्रिप्ट का उपयोग करके अपने स्रोत को पुन: असाइन करने के लिए छवि के लिए घटना को संभालें :
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घटना को डायनेमिक HTML 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' />NoteList.forEach और एरो फ़ंक्शंस के लिए ब्राउज़र समर्थन देखें ।
यहां सभी टूटी हुई छवियों को बदलने का एक त्वरित और गंदा तरीका है, और HTML कोड को बदलने की कोई आवश्यकता नहीं है;)
$("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);
});आप इसके लिए GitHub के अपने भ्रूण का उपयोग कर सकते हैं:
फ़्रंटेंड: https://github.com/github/fetch
या बैकएंड के लिए, एक Node.js संस्करण: https://github.com/bitinn/node-fetch
fetch(url)
.then(function(res) {
if (res.status == '200') {
return image;
} else {
return placeholder;
}
}संपादित करें: यह विधि XHR को बदलने जा रही है और माना जाता है कि यह क्रोम में पहले से मौजूद है। भविष्य में इसे पढ़ने वाले किसी व्यक्ति के लिए, आपको उपर्युक्त पुस्तकालय की आवश्यकता नहीं हो सकती है।
यह जावास्क्रिप्ट है, क्रॉस ब्राउज़र संगत होना चाहिए, और बदसूरत मार्कअप के बिना बचाता है 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 () विधि का कारण बनता है, भले ही छवि वास्तव में हो।
$("img").error ->
e = $(@).get 0
$(@).hide() if !$.browser.msie && (typeof this.naturalWidth == "undefined" || this.naturalWidth == 0)Prestaul के उत्तर का उपयोग करके , मैंने कुछ चेक जोड़े और मैं 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उस समय नहीं चलती हैं जब वे इंजेक्ट की जाती हैं, इसलिए आपको स्पष्ट होना होगा।
मैंने इस पोस्ट को अन्य एसओ पोस्ट को देखते हुए पाया । नीचे मेरे द्वारा दिए गए उत्तर की एक प्रति है।
मुझे पता है कि यह एक पुराना धागा है, लेकिन रिएक्ट लोकप्रिय हो गया है और शायद, रिएक्ट का उपयोग करने वाला कोई व्यक्ति उसी समस्या का उत्तर ढूंढने के लिए यहां आएगा।
इसलिए, यदि आप रिएक्ट का उपयोग कर रहे हैं, तो आप नीचे की तरह कुछ कर सकते हैं, जो एक मूल जवाब था, जो रिएक्ट टीम के बेन अल्परट द्वारा प्रदान किया गया था ।
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))
})यहां JQuery द्वारा लिपटी HTML5 इमेज ऑब्जेक्ट का उपयोग करके एक उदाहरण दिया गया है। प्राथमिक छवि URL के लिए लोड फ़ंक्शन को कॉल करें और यदि वह लोड त्रुटि का कारण बनता है, तो छवि की src विशेषता को बैकअप URL के साथ बदलें।
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' खाली है -> सरणी सूची (वर्तमान dir में) से पहली वाली (जो कि 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();
}
}
}
}
};तो, यह मेरे src में सही 'need.png' या करंट dir से 'no-image.png' डालेगा।
मुझे यकीन नहीं है कि अगर कोई बेहतर तरीका है, लेकिन मैं इसे प्राप्त करने के लिए हैक के बारे में सोच सकता हूं - आप अमाक्स पोस्ट को img URL पर कर सकते हैं, और यह देखने के लिए प्रतिक्रिया पार्स कर सकते हैं कि क्या छवि वास्तव में वापस आ गई। यदि यह 404 या कुछ के रूप में वापस आया, तो आईएमजी को स्वैप करें। हालांकि मुझे उम्मीद है कि यह काफी धीमी होगी।
मैंने अपनी समस्या को इन दो सरल कार्यों से हल किया:
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 त्रुटि-> backup.png-> त्रुटि-> backup.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's bg पर दिखाई देता है । यह काम करता है, तो आपकी छवियों एक डिफ़ॉल्ट आकार है (उदाहरण के लिए height, min-height, widthऔर / या min-width)।
आपको टूटी हुई छवि का आइकन दिखाई देगा, लेकिन यह एक सुधार है। IE9 के लिए सफलतापूर्वक परीक्षण किया गया। iOS सफारी और क्रोम टूटे हुए आइकन को भी नहीं दिखाते हैं।
.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 पर मौजूद नहीं है), छवि URL को डिफ़ॉल्ट में बदल दिया जाएगा,
.Error () के बारे में अधिक जानकारी के लिए
$('img').on('error', function (e) {
$(this).attr('src', 'broken.png');
});कभी-कभी errorईवेंट का उपयोग करना संभव नहीं होता है, उदाहरण के लिए, क्योंकि आप पहले से लोड किए गए पृष्ठ पर कुछ करने की कोशिश कर रहे हैं, जैसे कि जब आप कोड को कंसोल, एक बुकमार्कलेट, या स्क्रिप्ट को अतुल्यकालिक रूप से लोड कर रहे हों। उस मामले में, उस की जाँच कर रहे हैं img.naturalWidthऔर img.naturalHeight0 कर रहे हैं लगता है।
उदाहरण के लिए, कंसोल से सभी टूटी हुई छवियों को फिर से लोड करने के लिए यहां एक स्निपेट है:
$$("img").forEach(img => {
if (!img.naturalWidth && !img.naturalHeight) {
img.src = img.src;
}
}मुझे यह सबसे अच्छा काम करने के लिए मिला, अगर कोई छवि पहली बार लोड करने में विफल रहती है, तो इसे पूरी तरह से DOM से हटा दिया जाता है। निष्पादन console.clear()कंसोल विंडो को साफ रखता है, क्योंकि 404 त्रुटियों को कोशिश / पकड़ने वाले ब्लॉक के साथ छोड़ा नहीं जा सकता है।
$('img').one('error', function(err) {
// console.log(JSON.stringify(err, null, 4))
$(this).remove()
console.clear()
})