javascript - जब जावास्क्रिप्ट में कोई छवि लोड नहीं हो पाती है तो पता लगाएं




image-loading imagesource (5)

img के लिए jQuery + सीएसएस

JQuery के साथ यह मेरे लिए काम कर रहा है:

$('img').error(function() {
    $(this).attr('src', '/no-img.png').addClass('no-img');
});

और मैं निम्नलिखित छवि संपत्ति के साथ इसके आकार के बावजूद अपनी तस्वीर पर हर जगह इस तस्वीर का उपयोग कर सकता हूं:

img.no-img {
    object-fit: cover;
    object-position: 50% 50%;
}

टीआईपी: कम से कम 800 x 800 पिक्सल की स्क्वायर छवि का उपयोग करें।

केवल पृष्ठभूमि-आईएमजी के लिए सीएसएस

पृष्ठभूमि छवियों को खोने के लिए, मैंने प्रत्येक background-image घोषणा पर निम्नलिखित भी जोड़ा:

background-image: url('path-to-image.png'), url('no-img.png');

चेतावनी: ट्रांसपरेंट छवियों के लिए काम नहीं कर रहा है।

अपाचे सर्वर पक्ष

एक और समाधान ब्राउज़र पर भेजने से पहले अपाचे के साथ लापता छवि का पता लगाने और defualt no-img.png सामग्री द्वारा इसे रीप्लस करना है।

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} /images/.*\.(gif|jpg|jpeg|png)$
RewriteRule .* /images/no-img.png [L,R=307]

क्या यह निर्धारित करने का कोई तरीका है कि कोई छवि पथ वास्तविक छवि की ओर जाता है, यानी, जब कोई छवि जावास्क्रिप्ट में लोड होने में विफल होती है तो पता लगाएं।

एक वेब ऐप के लिए, मैं एक एक्सएमएल फ़ाइल पार्स कर रहा हूं और छवि पथों की सूची से गतिशील रूप से HTML छवियां बना रहा हूं। सर्वर पर कुछ छवि पथ अब मौजूद नहीं हो सकते हैं, इसलिए मैं यह पता लगाकर कि कौन सी छवियों को लोड करने में विफल रहता है और उस HTML img तत्व को हटाने में विफलता से असफल होना चाहता हूं।

नोट JQuery समाधानों का उपयोग करने में सक्षम नहीं होगा (बॉस JQuery का उपयोग नहीं करना चाहता, हाँ मुझे पता है कि मुझे शुरू नहीं किया गया है)। मुझे JQuery में किसी छवि को लोड होने पर पता लगाने के लिए एक तरीका पता है, लेकिन यह विफल नहीं हुआ है।

आईएमजी तत्व बनाने के लिए मेरा कोड लेकिन मैं कैसे पता लगा सकता हूं कि आईएमजी पथ छवि लोड करने में विफल रहा है या नहीं?

var imgObj = new Image();  // document.createElement("img");
imgObj.src = src;

आप निम्न कोड आज़मा सकते हैं। हालांकि मैं ब्राउज़र अनुकूलता के लिए झुकाव नहीं कर सकता, इसलिए आपको इसका परीक्षण करना होगा।

function testImage(URL) {
    var tester=new Image();
    tester.onload=imageFound;
    tester.onerror=imageNotFound;
    tester.src=URL;
}

function imageFound() {
    alert('That image is found and loaded');
}

function imageNotFound() {
    alert('That image was not found.');
}

testImage("http://foo.com/bar.jpg");

और jQuery-प्रतिरोधी मालिक के लिए मेरी सहानुभूति!


जवाब अच्छा है, लेकिन यह एक समस्या पेश करता है। जब भी आप सीधे onload या onerror आवंटित करते हैं, तो वह पहले कॉल किए गए कॉलबैक को प्रतिस्थापित कर सकता है। यही कारण है कि एक अच्छी विधि है कि "EventTarget पर निर्दिष्ट श्रोता को पंजीकृत करता है जिसे इसे एमडीएन पर कहा जाता है" । आप एक ही घटना पर जितना चाहें उतने श्रोताओं को पंजीकृत कर सकते हैं।

मुझे थोड़ा जवाब दोबारा लिखने दो।

function testImage(url) {
    var tester = new Image();
    tester.addEventListener('load', imageFound);
    tester.addEventListener('error', imageNotFound);
    tester.src = url;
}

function imageFound() {
    alert('That image is found and loaded');
}

function imageNotFound() {
    alert('That image was not found.');
}

testImage("http://foo.com/bar.jpg");

चूंकि बाह्य संसाधन लोडिंग प्रक्रिया असीमित है, इसलिए निम्न जावास्क्रिप्ट का उपयोग करने के लिए यह भी बेहतर होगा, जैसे कि निम्नलिखित।

function testImage(url) {

    // Define the promise
    const imgPromise = new Promise(function imgPromise(resolve, reject) {

        // Create the image
        const imgElement = new Image();

        // When image is loaded, resolve the promise
        imgElement.addEventListener('load', function imgOnLoad() {
            resolve(this);
        });

        // When there's an error during load, reject the promise
        imgElement.addEventListener('error', function imgOnError() {
            reject();
        })

        // Assign URL
        imgElement.src = url;

    });

    return imgPromise;
}

testImage("http://foo.com/bar.jpg").then(

    function fulfilled(img) {
        console.log('That image is found and loaded', img);
    },

    function rejected() {
        console.log('That image was not found');
    }

);

बस नीचे की तरह:

var img = new Image(); 
img.src = imgUrl; 

if (!img.complete) {

//has picture
}
else //not{ 

}

/**
 * Tests image load.
 * @param {String} url
 * @returns {Promise}
 */
function testImageUrl(url) {
  return new Promise(function(resolve, reject) {
    var image = new Image();
    image.addEventListener('load', resolve);
    image.addEventListener('error', reject);
    image.src = url;
  });
}

return testImageUrl(imageUrl).then(function imageLoaded(e) {
  return imageUrl;
})
.catch(function imageFailed(e) {
  return defaultImageUrl;
});





onerror