JQuery के साथ छवियों को लोड करना

Question

मैं जावास्क्रिप्ट के साथ छवियों को प्रीलोड करने का एक त्वरित और आसान तरीका ढूंढ रहा हूं। मैं jQuery का उपयोग कर रहा हूँ अगर यह महत्वपूर्ण है।

मैंने इसे यहाँ देखा ( http: //nettuts.com ... ):

function complexLoad(config, fileNames) {
  for (var x = 0; x < fileNames.length; x++) {
    $("<img>").attr({
      id: fileNames[x],
      src: config.imgDir + fileNames[x] + config.imgFormat,
      title: "The " + fileNames[x] + " nebula"
    }).appendTo("#" + config.imgContainer).css({ display: "none" });
  }
};

लेकिन, मैं जो चाहता हूं, उसके लिए यह थोड़ा ऊपर-ऊपर दिखता है!

मुझे पता है कि वहाँ jQuery प्लगइन्स हैं जो ऐसा करते हैं लेकिन वे सभी एक बड़े आकार (आकार में) लगते हैं; मुझे बस छवियों को लोड करने का एक त्वरित, आसान और छोटा तरीका चाहिए!

Comments

$.each(arguments,function(){(new Image).src=this});

— डेविड हेलसिंग 16

Answer 1

त्वरित और आसान:

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

या, यदि आप एक jQuery प्लगइन चाहते हैं:

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

// Usage:

$(['img1.jpg','img2.jpg','img3.jpg']).preload();

Comments

क्या ब्राउज़र को कैश करने के लिए छवि तत्व को DOM में सम्मिलित करने की आवश्यकता नहीं है?

— जोशनेरो

मेरा मानना ​​है कि $('<img />')बस मेमोरी में एक छवि तत्व बनाता है ( लिंक देखें )। ऐसा लगता है '$('<img src="' + this + '" />')कि वास्तव में एक छिपे हुए DIV के भीतर तत्व का निर्माण होगा, क्योंकि यह अधिक "जटिल" है। हालाँकि, मुझे नहीं लगता कि अधिकांश ब्राउज़र के लिए इसकी आवश्यकता है।

— जोशनारो

यह jQuery प्लगइन लिखने का एक अजीब तरीका है। क्यों नहीं $.preload(['img1.jpg', 'img2.jpg'])?

— एलेक्स

इसे अंदर बुलाना सुनिश्चित करें $(window).load(function(){/*preload here*/});क्योंकि उस तरह से दस्तावेज़ में सभी चित्र पहले लोड किए गए हैं, यह संभावना है कि वे पहले आवश्यक हैं।

— जस्पर केंस

@RegionalC - लोड घटना के सेट होने से पहले छवि को लोड करने से ठीक loadपहले सेट करने से पहले इवेंट सेट करना थोड़ा सुरक्षित हो सकता srcहै? $('<img/>').load(function() { /* it's loaded! */ }).attr('src', this);

— स्पेयरबाइट्स

Answer 2

यहां पहली प्रतिक्रिया का एक संशोधित संस्करण है जो वास्तव में छवियों को डोम में लोड करता है और इसे डिफ़ॉल्ट रूप से छुपाता है।

function preload(arrayOfImages) {
    $(arrayOfImages).each(function () {
        $('<img />').attr('src',this).appendTo('body').css('display','none');
    });
}

Comments

hide()से अधिक कठिन है css('display', 'none')।

— एलेक्स

उन्हें DOM में डालने से क्या फ़ायदा?

— एलेक्स

मैं उन्हें DOM में डालने का फायदा भी जानना चाहूंगा।

— जेद्माओ

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

— डेनिस रॉन्गो जू

डेनिस रोंगो। DOM पर छवियों को लागू करना Chrome पर यादृच्छिक पुन: लोड करना निर्धारित करता है। धन्यवाद!

— tmorell

Answer 3

जावास्क्रिप्ट छवि ऑब्जेक्ट का उपयोग करें ।

यह फ़ंक्शन आपको सभी चित्रों को लोड करने पर कॉलबैक को ट्रिगर करने की अनुमति देता है। हालांकि, ध्यान दें कि यह कम से कम एक संसाधन लोड नहीं होने पर कॉलबैक को ट्रिगर नहीं करेगा। यह आसानी से onerrorकॉलबैक लागू करने और loadedमूल्य वृद्धि या त्रुटि को संभालने के द्वारा तय किया जा सकता है ।

var preloadPictures = function(pictureUrls, callback) {
    var i,
        j,
        loaded = 0;

    for (i = 0, j = pictureUrls.length; i < j; i++) {
        (function (img, src) {
            img.onload = function () {                               
                if (++loaded == pictureUrls.length && callback) {
                    callback();
                }
            };

            // Use the following callback methods to debug
            // in case of an unexpected behavior.
            img.onerror = function () {};
            img.onabort = function () {};

            img.src = src;
        } (new Image(), pictureUrls[i]));
    }
};

preloadPictures(['http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar'], function(){
    console.log('a');
});

preloadPictures(['http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar'], function(){
    console.log('b');
});

Comments

सही काम करें, जावास्क्रिप्ट छवि ऑब्जेक्ट का उपयोग करें। क्या आपने इन उत्तरों में गलत काम करने वाले लोगों का अवलोकन किया है?

— एलेक्स

शानदार कोड। क्या मैं यह सोचने में सही हूं कि क्या यह onloadघटना आग लग जाएगी, भले ही छवि कैश हो? (क्योंकि img.onloadपहले घोषित किया गया है)। यह मेरे परीक्षण से पता चला है।

— Startec

@alex संभावित, हाँ। यदि लक्ष्य प्री-लोड करना है (जो प्रदर्शन के एक आदेश का सुझाव देता है) तो मैं jQuery निर्भर विकल्पों के बजाय एक कच्चा JS विकल्प देखना पसंद करूंगा।

— चार्ली श्लेसेर

मुझे यह समाधान बहुत पसंद था लेकिन मुझे पता चला कि यह मेरे फ़ायरफ़ॉक्स में काम नहीं करता है। क्या यह सिर्फ मुझे है या दूसरों को एक ही मुद्दा है?

— गजिला

@ गाज़िलिन अधिक जानकारी देते हैं। आप "काम नहीं" कैसे परिभाषित करते हैं? FF संस्करण क्या है?

— गजस

Answer 4

जेपी, आपके समाधान की जाँच करने के बाद, मैं अभी भी फ़ायरफ़ॉक्स में समस्या कर रहा था जहाँ यह पृष्ठ लोड करने के साथ आगे बढ़ने से पहले छवियों को लोड नहीं करेगा। मैंने sleep(5)अपने सर्वर साइड स्क्रिप्ट में कुछ डालकर इसकी खोज की । मैंने आपके आधार पर निम्नलिखित समाधान को लागू किया जो इसे हल करने के लिए लगता है।

मूल रूप से मैंने आपके jQuery के प्रीलोड प्लगइन में कॉलबैक जोड़ा है, ताकि सभी छवियों के ठीक से लोड होने के बाद इसे कॉल किया जाए।

// Helper function, used below.
// Usage: ['img1.jpg','img2.jpg'].remove('img1.jpg');
Array.prototype.remove = function(element) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] == element) { this.splice(i,1); }
  }
};

// Usage: $(['img1.jpg','img2.jpg']).preloadImages(function(){ ... });
// Callback function gets called after all images are preloaded
$.fn.preloadImages = function(callback) {
  checklist = this.toArray();
  this.each(function() {
    $('<img>').attr({ src: this }).load(function() {
      checklist.remove($(this).attr('src'));
      if (checklist.length == 0) { callback(); }
    });
  });
};

रुचि के बाहर, मेरे संदर्भ में, मैं इसका उपयोग इस प्रकार कर रहा हूं:

$.post('/submit_stuff', { id: 123 }, function(response) {
  $([response.imgsrc1, response.imgsrc2]).preloadImages(function(){
    // Update page with response data
  });
});

उम्मीद है कि यह किसी ऐसे व्यक्ति की मदद करता है जो Google से इस पेज पर आता है (जैसा कि मैंने किया था) अजाक्स कॉल पर छवियों को लोड करने के लिए एक समाधान की तलाश में था।

Comments

उन लोगों के लिए जो Array.prototype को गड़बड़ाने में रुचि नहीं रखते हैं, इसके बजाय, आप कर सकते हैं: checklist = this.lengthऔर checklist--if (checklist == 0) callback();

— ऑनलोड

हालाँकि जो कुछ भी आपके पास नहीं है, उसमें नए या नए तरीकों को जोड़ना, जावास्क्रिप्ट में सबसे बुरी प्रथाओं में से एक है।

— रिहर्सल

अच्छा और त्वरित, लेकिन यह कोड कॉलबैक को कभी भी आग नहीं देगा अगर कोई चित्र टूट गया हो या लोड करने में असमर्थ हो।

— सामी

.attr({ src: this }).load(function() {...})किया जाना चाहिए .load(function() {...}).attr({ src: this })अन्यथा आप कैशिंग समस्याओं होगा।

— केविन बी

Answer 5

यह एक jQuery कोड एक DOM तत्व img बनाता है (और लोड करता है) इसे दिखाए बिना:

$('<img src="img/1.jpg"/>');

Comments

@ हुज़्ज़ह - आप स्प्राइट के इस्तेमाल से बेहतर हो सकते हैं। कम http अनुरोध। :)

— एलेक्स के

Answer 6

$.fn.preload = function (callback) {
  var length = this.length;
  var iterator = 0;

  return this.each(function () {
    var self = this;
    var tmp = new Image();

    if (callback) tmp.onload = function () {
      callback.call(self, 100 * ++iterator / length, iterator === length);
    };

    tmp.src = this.src;
  });
};

उपयोग काफी सरल है:

$('img').preload(function(perc, done) {
  console.log(this, perc, done);
});

http://jsfiddle.net/yckart/ACbTK/

Comments

यह वास्तव में एक अच्छा जवाब है, यह वास्तव में शीर्ष मतदान उत्तर imho होना चाहिए।

— स्लीपाइकल

कुछ समझाने वाले शब्द अच्छे रहे होंगे।

— रोब्सच

अच्छा जवाब है, लेकिन मैं lorempixel.com के बजाय picsum.photos का उपयोग करने का सुझाव देता हूं

— Aleksandar

Answer 7

मेरे पास एक छोटा सा प्लगइन है जो इसे संभालता है।

इसे waForImages कहा जाता है और यह imgCSS, उदाहरण के लिए एक छवि के संदर्भ में तत्वों या किसी भी तत्व को संभाल सकता है div { background: url(img.png) }।

यदि आप बस सभी छवियों को लोड करना चाहते हैं, जिनमें सीएसएस में संदर्भित लोग शामिल हैं, तो यहां बताया गया है कि आप इसे कैसे करेंगे :)

$('body').waitForImages({
    waitForAll: true,
    finished: function() {
       // All images have loaded.
    }  
});

Comments

क्या यह प्लगइन उन छवियों का कारण बनता है जो अभी तक लोड होने वाले पृष्ठ पर दिखाई नहीं दी हैं, या केवल उन छवियों के लिए घटनाओं को संलग्न करती हैं जो पहले से लोड होने वाली थीं?

— डेव कैमरून

@DaveCameron यह प्रदर्शित नहीं करता है कि चित्र दिखाई दे रहे हैं या नहीं। आप इसे आसानी से फोर्क कर सकते हैं और उस बदलाव को कर सकते हैं - बस :visibleकस्टम चयनकर्ता में जोड़ें ।

— एलेक्स

यह प्लगइन बहुत दिलचस्प लगता है। हालांकि, jquery प्रलेखन पर प्रकाश डाला गया है कि loadघटना, जब छवियों पर लागू होता है: "लगातार काम नहीं करता है और न ही मज़बूती से क्रॉस-ब्राउज़र"। कैसे प्लगइन उस के आसपास प्राप्त करने में कामयाब रहा है?

— ग्यारहवें

@EleventyOne कस्टम चयनकर्ता के संबंध में स्रोत की जाँच करें।

— एलेक्स

@alex यह प्लगइन उन चित्रों को कैसे लोड करता है जो सीएसएस में सेट होते हैं: किसी तत्व का होवर? यह मेरे लिए काम नहीं करता है

— फिलिप हॉफमैन

Answer 8

आप अपने html में छवियों को css display:none;नियम का उपयोग करके लोड कर सकते हैं , फिर जब आप js या jquery के साथ चाहें तो उन्हें दिखा सकते हैं

प्रीलोड करने के लिए js या jquery फ़ंक्शंस का उपयोग न करें, बस एक css रूल बनाम js की कई लाइनों को निष्पादित किया जाना है

उदाहरण: Html

<img src="someimg.png" class="hide" alt=""/>

सीएसएस:

.hide{
display:none;
}

jQuery:

//if want to show img 
$('.hide').show();
//if want to hide
$('.hide').hide();

Jquery / javascript द्वारा छवियों को लोड करना अच्छा नहीं है क्योंकि छवियों को पेज में लोड होने में कुछ मिलीसेकंड लगते हैं + आपके पास स्क्रिप्ट को पार्स और निष्पादित करने के लिए मिलीसेकंड होता है, तो निश्चित रूप से यदि वे बड़ी छवियां हैं, तो उन्हें hml में छुपाना प्रदर्शन के लिए भी बेहतर है। कारण छवि वास्तव में दिखाई देने वाली मधुमक्खी के बिना वास्तव में पहले से ही भरी हुई है, जब तक कि आप ऐसा नहीं दिखाते हैं!

Comments

इस दृष्टिकोण के बारे में अधिक जानकारी यहां पाई जा सकती है: perishablepress.com/…

— gdelfino

लेकिन आपको इस बात से अवगत होना चाहिए कि इस तकनीक में एक बड़ी खामी है: आपका पेज पूरी तरह से लोड नहीं होगा, जब तक कि सभी चित्र लोड नहीं हो जाते। छवियों को प्रीलोड करने और उनके आकार के आधार पर, इसमें कुछ समय लग सकता है। इससे भी बदतर, अगर <img> टैग ऊंचाई और चौड़ाई को निर्दिष्ट नहीं करता है तो कुछ ब्राउज़र प्रतीक्षा कर सकते हैं जब तक कि शेष पेज को रेंडर करने से पहले छवि को प्राप्त नहीं किया जाता है।

@ यदि आपको वैसे भी img को लोड करने की आवश्यकता है, तो आप उन्हें HTML के साथ लोड करने और किसी भी प्रकार की ब्लिंकिंग और आधी भरी हुई छवियों से बचने के लिए चुनने के लिए स्वतंत्र हैं, या यदि आप एक स्थिर समाधान के लिए अधिक गति प्राप्त करना चाहते हैं

— itsme

मुझे भी वास्तव में लगता है कि जावास्क्रिप्ट के साथ html टैग बनाना मेरे सभी 2

— सेंटों

मुझे एक बहुत ही जटिल परियोजना के लिए एक त्वरित समाधान की आवश्यकता थी और यह वह थी।

— जर्मस्टॉर्म

Answer 9

यह jquery imageLoader प्लगइन सिर्फ 1.39kb है

उपयोग:

$({}).imageLoader({
    images: [src1,src2,src3...],
    allcomplete:function(e,ui){
        //images are ready here
        //your code - site.fadeIn() or something like that
    }
});

अन्य विकल्प भी हैं जैसे कि आप छवियों को सिंक्रोनाइज़ करना चाहते हैं या asychronously और प्रत्येक व्यक्तिगत छवि के लिए एक पूरी घटना।

Comments

@AamirAfridi वह क्यों है?

— इयान

@Ian क्योंकि दस्तावेज़ पहले ही तैयार है जब तक कॉलबैक निकाल दिया जाता है। $ (दस्तावेज़)। जब कॉलबैक की बात आती है, तो इसका मतलब है कि सभी चित्र लोड किए गए हैं, जिसका अर्थ है कि योरू डोम को लोड किया गया है, इसलिए कॉलबैक के अंदर दस्तावेज़ की आवश्यकता नहीं है।

— आमिर अफरीदी

@AamirAfridi इस बात की कोई गारंटी नहीं है कि दस्तावेज़ कॉलबैक में तैयार है ... आप कहाँ से इसका उल्लेख कर रहे हैं? allcompleteDOM के तैयार होने के बाद कॉलबैक को कहते हैं कि प्लगइन के पेज पर कुछ भी नहीं है। एक बहुत अच्छा मौका है कि डोम के तैयार होने के बाद छवियां लोड हो रही हैं, लेकिन मानने का कोई कारण नहीं है। मुझे नहीं पता कि आपको क्यों लगता है कि कॉलबैक जादुई हैं और डोम तैयार होने के बाद निष्पादित किए जाते हैं ... क्या आप समझा सकते हैं कि आप कहाँ से प्राप्त कर रहे हैं? सिर्फ इसलिए कि छवियाँ भरी हुई हैं इसका मतलब यह नहीं है कि DOM तैयार है

— Ian

@AamirAfridi और प्लगइन के लिए दस्तावेज यहां तक ​​कहते हैं: NB to use this as an image preloader simply put your $(document).ready(function(){}); into your 'allcomplete' event : > simples!... यह सीधे यह सुझाता है कि यह उत्तर क्या दर्शाता है।

— इयान

@AamirAfridi इस स्थिति के लिए कोई मतलब नहीं है। प्लगइन एक पूर्व लोडर है। आप इसे जल्द से जल्द अमल में लाना चाहते हैं। और बहुत सारी चीजें हैं जो डोम पर निर्भर नहीं करती हैं कि आप जितनी जल्दी हो सके आग लगाना चाहते हैं, और फिर जब डोम तैयार होता है, तो कुछ करें।

— इयान

Answer 10

JQuery में छवियों को प्रीलोड करने और कॉलबैक फ़ंक्शन प्राप्त करने का एक त्वरित, प्लगइन-मुक्त तरीका एक imgही बार में कई टैग बनाने और प्रतिक्रियाओं को गिनने के लिए है, जैसे;

function preload(files, cb) {
    var len = files.length;
    $(files.map(function(f) {
        return '<img src="'+f+'" />';
    }).join('')).load(function () {
        if(--len===0) {
            cb();
        }
    });
}

preload(["one.jpg", "two.png", "three.png"], function() {
    /* Code here is called once all files are loaded. */
});
​    ​

ध्यान दें कि यदि आप IE7 का समर्थन करना चाहते हैं, तो आपको इस थोड़े कम सुंदर संस्करण का उपयोग करने की आवश्यकता होगी (जो अन्य ब्राउज़रों में भी काम करता है):

function preload(files, cb) {
    var len = files.length;
    $($.map(files, function(f) {
        return '<img src="'+f+'" />';
    }).join('')).load(function () {
        if(--len===0) {
            cb();
        }
    });
}

Answer 11

इसके लिए धन्यवाद! मैं जेपी के जवाब पर थोड़ा रिफ़ जोड़ने के लिए झूठ बोलूंगा - मुझे नहीं पता कि क्या इससे किसी को मदद मिलेगी, लेकिन इस तरह से आपको चित्रों की एक सरणी नहीं बनानी होगी, और आप अपनी सभी बड़ी छवियों को लोड कर सकते हैं यदि आप अपने अंगूठे को सही ढंग से नाम दें। यह आसान है क्योंकि मेरे पास कोई है जो html में सभी पृष्ठों को लिख रहा है, और यह उनके लिए एक कम कदम सुनिश्चित करता है - छवि सरणी बनाने की आवश्यकता को समाप्त करना, और एक और कदम जहां चीजें खराब हो सकती हैं।

$("img").each(function(){
    var imgsrc = $(this).attr('src');
    if(imgsrc.match('_th.jpg') || imgsrc.match('_home.jpg')){
      imgsrc = thumbToLarge(imgsrc);
      (new Image()).src = imgsrc;   
    }
});

असल में, पृष्ठ पर प्रत्येक छवि के लिए यह प्रत्येक छवि के src को पकड़ लेता है, अगर यह कुछ मानदंडों (एक अंगूठे, या होम पेज छवि) से मेल खाता है तो यह नाम बदल देता है (छवि स्ट्रिंग में एक मूल स्ट्रिंग को प्रतिस्थापित करता है), फिर छवियों को लोड करता है ।

मेरे मामले में पृष्ठ अंगूठे की छवियों से भरा हुआ था, जैसे कि सभी ने image_th.jpg नाम दिया, और सभी संबंधित बड़ी छवियों का नाम image_lg.jpg रखा गया। अंगूठे से बड़े सिर्फ _l.jpg को _lg.jpg के साथ बदल देता है और फिर सभी बड़ी छवियों को लोड करता है।

आशा है कि यह किसी की मदद करता है।

Answer 12

    jQuery.preloadImage=function(src,onSuccess,onError)
    {
        var img = new Image()
        img.src=src;
        var error=false;
        img.onerror=function(){
            error=true;
            if(onError)onError.call(img);
        }
        if(error==false)    
        setTimeout(function(){
            if(img.height>0&&img.width>0){ 
                if(onSuccess)onSuccess.call(img);
                return img;
            }   else {
                setTimeout(arguments.callee,5);
            }   
        },0);
        return img; 
    }

    jQuery.preloadImages=function(arrayOfImages){
        jQuery.each(arrayOfImages,function(){
            jQuery.preloadImage(this);
        })
    }
 // example   
    jQuery.preloadImage(
        'img/someimage.jpg',
        function(){
            /*complete
            this.width!=0 == true
            */
        },
        function(){
            /*error*/
        }
    )

Comments

ढेर अतिप्रवाह में आपका स्वागत है! केवल कोड का एक खंड पोस्ट करने के बजाय, कृपया बताएं कि यह कोड समस्या का हल क्यों निकालता है। स्पष्टीकरण के बिना, यह एक उत्तर नहीं है।

— मार्टिन पीटर्स

Answer 13

मैं निम्नलिखित कोड का उपयोग करता हूं:

$("#myImage").attr("src","img/spinner.gif");

var img = new Image();
$(img).load(function() {
    $("#myImage").attr("src",img.src);
});
img.src = "http://example.com/imageToPreload.jpg";

Comments

पहले लोड इवेंट में बांधें, फिर src सेट करें।

— केविन बी

Answer 14

मैं (आधुनिक) वेब ब्राउज़रों को बताने के लिए एक मैनिफ़ेस्ट फ़ाइल का उपयोग करूँगा ताकि वे सभी संबंधित चित्रों को लोड कर सकें और उन्हें कैश कर सकें। इसे स्वचालित रूप से करने के लिए ग्रंट और ग्रंट-मैनिफ़ेस्ट का उपयोग करें और प्रीलोड स्क्रिप्ट, कैश अमान्य, सीडीएन आदि के बारे में फिर से चिंता न करें।

https://github.com/gunta/grunt-manifest

Answer 15

यह IE9 में भी मेरे लिए काम करता है:

$('<img src="' + imgURL + '"/>').on('load', function(){ doOnLoadStuff(); });

Comments

यह कैशिंग के कारण अंततः विफल हो जाएगा, हमेशा src विशेषता सेट करने से पहले लोड घटना को बांधें।

— केविन बी

Answer 16

मैं Google मानचित्र API कस्टम ओवरले के साथ ऐसा करना चाहता था। उनका नमूना कोड बस IMG तत्वों को सम्मिलित करने के लिए JS का उपयोग करता है और छवि प्लेसहोल्डर बॉक्स प्रदर्शित होता है जब तक कि छवि लोड नहीं होती है। मुझे यहाँ एक उत्तर मिला जो मेरे लिए काम कर रहा था: https://stackoverflow.com/a/10863680/2095698 ।

$('<img src="'+ imgPaht +'">').load(function() {
$(this).width(some).height(some).appendTo('#some_target');
});

यह पहले से सुझाई गई छवि को लोड करता है, और फिर img URL लोड होने के बाद img ऑब्जेक्ट को जोड़ने के लिए हैंडलर का उपयोग करता है। jQuery के दस्तावेज़ चेतावनी देते हैं कि कैश्ड छवियां इस ईवेंटिंग / हैंडलर कोड के साथ अच्छी तरह से काम नहीं करती हैं, लेकिन यह मेरे लिए फ़ायरफ़ॉक्स और क्रोम में काम कर रही है, और मुझे IE के बारे में चिंता करने की ज़रूरत नहीं है।

Comments

यह कैश्ड छवियों के साथ अच्छी तरह से काम नहीं करेगा जैसा कि आपने पाया है। वर्कअराउंड लोड इवेंट को पहले बाइंड करने के लिए है, फिर src विशेषता सेट करें।

— केविन बी

Answer 17

function preload(imgs) {
    $(imgs).each(function(index, value) {
        $('<img />').attr('src', value).appendTo('body').css('display', 'none');
    });
}

.attr('src',value) नहीं .attr('src',this)

बस इसे इंगित करने के लिए :)

Comments

thisकॉलबैक के अंदर स्कोप जो पारित किया $.eachजाता है उसे उस मान को असाइन किया जाता है जिसे पुनरावृत्त किया जा रहा है।

— ओयबेक

? $ (('' img1.jpg ',' img2.jpg ',' img3.jpg '' ')) प्रत्येक) (फंक्शन (इंडेक्स, वैल्यू) {कंसोल.लॉग (वैल्यू); // img1.jpg कंसोल .log (यह) ; // स्ट्रिंग {0 = "i", 1 = "m", 2 = "g", अधिक ...} $ ('<img />))। Attr (' src ', यह) .appendTo (') body '); css (' प्रदर्शन ',' कोई नहीं ');});

— व्हिशर

हम्म। मुझे लगता है कि आप यहीं हैं। उदाहरण के लिए $("div").each(function(i, el){ console.log(el == this);});सभी trueएस उत्पन्न करता है ; सरणी पर Iteration अलग व्यवहार करने लगता है।

— ओयबेक

Answer 18

कॉफ़ीस्क्रिप्ट में 5 लाइनें

array = ['/img/movie1.png','/img/movie2.png','/img/movie3.png']

$(document).ready ->
  for index, image of array
    img[index] = new Image()
    img[index].src = image

Comments

क्या आप इस बात पर विस्तार कर सकते हैं कि ओपी में सवाल हल करने के लिए समाधान कैसे काम करता है? और संभवतः अपने कोड पर टिप्पणी करें ताकि अन्य लोग इसे आसानी से समझ सकें?

— Ro Yo Mi

Answer 19

उन लोगों के लिए जो थोड़ी सी भी कार्रवाई के बारे में जानते हैं, आप न्यूनतम प्रयास के साथ, फ़्लैश प्लेयर की जांच कर सकते हैं, और एक फ्लैश प्रीलोडर बना सकते हैं, जिसे आप html5 / Javascript / Jquery पर भी निर्यात कर सकते हैं। फ़्लैश प्लेयर का पता नहीं चलने पर उपयोग करने के लिए, उदाहरण के लिए एचटीएमएल 5 प्लेयर पर यूट्यूब भूमिका के साथ ऐसा करने के लिए उदाहरणों की जांच करें :) और अपना खुद का बनाएं। मेरे पास विवरण नहीं है, क्योंकि मैं अभी तक शुरू नहीं हुआ हूं, अगर मैं भूल नहीं गया, तो मैं इसे बाद में पोस्ट कर दूंगा और कुछ स्टैंडरड जेकरी कोड को मेरे लिए आज़माऊंगा।

Comments

यह कोई हल नहीं है। ब्राउज़र डिफ़ॉल्ट रूप से फ़्लैश प्लेयर का समर्थन नहीं करता है। इसे आसानी से जावास्क्रिप्ट के साथ प्राप्त किया जा सकता है जो कि देशी ब्राउज़र भाषा है।

— उस्मान अहमद

मुझे याद है कि 2012 से फ्लैश से नफरत है ... यह सामान्य नहीं था ... हर जगह मैं गया था जब मैंने फ्लैश शब्द का इस्तेमाल किया था।

— पीटर ग्रुपेलाकर