javascript - atscript - स्क्रिप्टिंग भाषा




जावास्क्रिप्ट प्रीलोडिंग छवियां (6)

क्या आप मुझे बता सकते हैं कि नीचे लिखा गया फ़ंक्शन सबसे अधिक छवियों को प्रीलोड करने के लिए पर्याप्त है यदि आज आमतौर पर उपयोग किए जाने वाले सभी ब्राउज़र नहीं हैं?

function preloadImage(url)
{
    var img=new Image();
    img.src=url;
}

मेरे पास imageURLs की एक सरणी है जो मैं लूप करता हूं और प्रत्येक यूआरएल के लिए प्रीलोड इमेज फ़ंक्शन को कॉल करता हूं।


कोशिश करो मुझे लगता है कि यह बेहतर है।

var images = [];
function preload() {
    for (var i = 0; i < arguments.length; i++) {
        images[i] = new Image();
        images[i].src = preload.arguments[i];
    }
}

//-- usage --//
preload(
    "http://domain.tld/gallery/image-001.jpg",
    "http://domain.tld/gallery/image-002.jpg",
    "http://domain.tld/gallery/image-003.jpg"
)

स्रोत: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/


मेरा दृष्टिकोण यहां है:

var preloadImages = function (srcs, imgs, callback) {
    var img;
    var remaining = srcs.length;
    for (var i = 0; i < srcs.length; i++) {
        img = new Image;
        img.onload = function () {
            --remaining;
            if (remaining <= 0) {
                callback();
            }
        };
        img.src = srcs[i];
        imgs.push(img);
    }
};

मैं आपको कुछ संभावित मुद्दों को रोकने के लिए प्रयास / पकड़ का उपयोग करने की सलाह देता हूं:

OOP:

    var preloadImage = function (url) {
        try {
            var _img = new Image();
            _img.src = url;
        } catch (e) { }
    }

मानक:

    function preloadImage (url) {
        try {
            var _img = new Image();
            _img.src = url;
        } catch (e) { }
    }

साथ ही, जब मैं डोम से प्यार करता हूं, तो पुराने बेवकूफ ब्राउज़रों को आपके साथ डोम का उपयोग करने में समस्या हो सकती है, इसलिए इसे फ्रीडम के योगदान के विपरीत आईएमएचओ से पूरी तरह से टालें। छवि () पुराने पुराने ब्राउज़र में बेहतर समर्थन है।


यह दृष्टिकोण थोड़ा और विस्तृत है। यहां आप एक कंटेनर में सभी प्रीलोडेड छवियों को स्टोर करते हैं, एक div हो सकता है। और जब आप छवियां दिखा सकते हैं या इसे डीओएम के भीतर सही स्थिति में ले जा सकते हैं।

function preloadImg(containerId, imgUrl, imageId) {
    var i = document.createElement('img'); // or new Image()
    i.id = imageId;
    i.onload = function() {
         var container = document.getElementById(containerId);
         container.appendChild(this);
    };
    i.src = imgUrl;
}

इसे आजमाएं , मैंने कुछ टिप्पणियां भी जोड़ दी हैं


हाँ। यह सभी प्रमुख ब्राउज़रों पर काम करना चाहिए।


हां यह काम करेगा, हालांकि ब्राउज़र वास्तविक कॉल (4-8 के बीच) को सीमित करेंगे और इस प्रकार सभी वांछित छवियों को कैश / प्रीलोड नहीं करेंगे।

ऐसा करने का एक बेहतर तरीका इस तरह की छवि का उपयोग करने से पहले ऑनलोड को कॉल करना है:

function (imageUrls, index) {  
    var img = new Image();

    img.onload = function () {
        console.log('isCached: ' + isCached(imageUrls[index]));
        *DoSomething..*

    img.src = imageUrls[index]
}

function isCached(imgUrl) {
    var img = new Image();
    img.src = imgUrl;
    return img.complete || (img .width + img .height) > 0;
}





confirmation