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});

— ডেভিড হেলসিং

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

ব্রাউজারটি ক্যাশে করে তা নিশ্চিত করার জন্য কি চিত্রের উপাদানটি ডিওমে প্রবেশ করার দরকার নেই?

— জোশনারো

আমি বিশ্বাস করি $('<img />')কেবল স্মৃতিতে একটি চিত্র উপাদান তৈরি করে ( লিঙ্কটি দেখুন )। দেখে মনে হচ্ছে '$('<img src="' + this + '" />')এটি আসলে একটি লুকানো ডিআইভির মধ্যে উপাদান তৈরি করবে, কারণ এটি আরও "জটিল"। তবে, আমি মনে করি না এটি বেশিরভাগ ব্রাউজারের জন্য প্রয়োজন।

— জোশনারো

এটি একটি jQuery প্লাগইন লেখার একটি অদ্ভুত উপায়। না কেন $.preload(['img1.jpg', 'img2.jpg'])?

— অ্যালেক্স

এটি ভিতরে কল করার বিষয়টি নিশ্চিত করুন $(window).load(function(){/*preload here*/});কারণ নথিতে সমস্ত চিত্র আগে লোড হয়, সম্ভবত এটির প্রয়োজন হয়।

— জ্যাস্পার কেনিস 5'12

@ রিজিওনালসি - লোড ইভেন্টটি সেট হওয়ার আগে চিত্রটি লোডিং শেষ করার ক্ষেত্রে 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')।

— অলেক্স

এগুলি ডিওমে intoোকানোর সুবিধা কী?

— অ্যালেক্স

এগুলি ডিওমে tingোকানোর সুবিধাটিও আমি জানতে চাই।

— jedmao

আমার অভিজ্ঞতা থেকে, ডিওমে একটি চিত্র প্রিললোড করা ব্রাউজারকে তার অস্তিত্ব সম্পর্কে এবং এটি সঠিকভাবে ক্যাশে হওয়ার জন্য সচেতন করে তোলে। অন্যথায়, চিত্রটি কেবল মেমরিতে বিদ্যমান যা কেবলমাত্র একক পৃষ্ঠাগুলির অ্যাপ্লিকেশানের জন্য কাজ করে।

— ডেনিস রঙ্গো

ডেনিস রঙ্গো। ডিওএম-এ চিত্রগুলি যুক্ত করা ক্রোমে স্থির র্যান্ডম পুনরায় লোড করা হচ্ছে। ধন্যবাদ!

— 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প্রথম ঘোষিত)। আমার পরীক্ষাগুলি এটাই দেখিয়েছিল।

— স্টারটেক

@ অ্যালেক্স সম্ভাব্য, হ্যাঁ। যদি লক্ষ্যটি পূর্ব-লোড হয় (যা পারফরম্যান্সের ক্রম নির্দেশ করে) তবে আমি jQuery নির্ভর বিকল্পগুলির পরিবর্তে একটি কাঁচা জেএস বিকল্প দেখতে পছন্দ করব।

— চার্লি শ্লিয়েসার

আমি এই সমাধানটি পছন্দ করেছিলাম তবে আমি কেবল আবিষ্কার করেছি যে এটি আমার ফায়ারফক্সে কাজ করে না। এটি কি আমি বা অন্যেরাও একই সমস্যা নিয়ে আসছেন?

— গাজিলিয়ন

@ গাজিলিয়ন আরও বিশদ দিন। আপনি কীভাবে "কাজ করছেন না" সংজ্ঞা দেবেন? এফএফ সংস্করণটি কী?

— গজুস

Answer 4

জেপি, আপনার সমাধানটি যাচাই করার পরেও, ফায়ারফক্সে আমার এখনও সমস্যা ছিল যেখানে এটি পৃষ্ঠাটি লোড করার সাথে সাথে চিত্রগুলি প্রিলোড করে না। আমি কিছু লাগিয়ে এটি আবিষ্কার করেছিsleep(5) আমার সার্ভার সাইড স্ক্রিপ্টে করেছি। আমি নীচে আপনার সমাধানের ভিত্তিতে নীচের সমাধানটি প্রয়োগ করেছি solve

মূলত আমি আপনার 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
  });
});

আশা করি এটি এজ্যাক্স কলগুলিতে চিত্রগুলি প্রিললোড করার সমাধান খুঁজছেন (যেমনটি আমি গুগল) থেকে এই পৃষ্ঠায় আসা কাউকে সহায়তা করে helps

Comments

তাদের জন্য যারা অ্যারে.প্রোটোটাইপটি বিশৃঙ্খলা করতে আগ্রহী নন, তাদের পরিবর্তে, আপনি এটি করতে পারেন: checklist = this.lengthএবং checklist--if (checklist == 0) callback();

— ওলোডলোড

জাভাস্ক্রিপ্টের সবচেয়ে খারাপ অভ্যাসগুলির মধ্যে নতুন যা যুক্ত করা বা আপনার নিজস্ব মালিকানাধীন কোনও জিনিসে বিদ্যমান পদ্ধতিগুলি সরিয়ে ফেলা সবকিছু ঠিক থাকবে।

— রিহার্ডস

দুর্দান্ত এবং দ্রুত, তবে চিত্রগুলির কোনও একটি ভাঙা বা লোড করতে অক্ষম হলে এই কোডটি কখনই কলব্যাক ফায়ার করবে না।

— SammyK

.attr({ src: this }).load(function() {...}).load(function() {...}).attr({ src: this })অন্যথায় আপনার ক্যাশে সমস্যা হবে should

— কেভিন বি

Answer 5

এই এক লাইনের jQuery কোড এটি না দেখিয়ে একটি ডোম উপাদান তৈরি করে (এবং লোড করে):

$('<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

এটি সত্যিই ভাল উত্তর, এটি সত্যই শীর্ষে ভোট হওয়া উত্তর ইমো হওয়া উচিত।

— স্লিপকালাল

কিছু ব্যাখ্যা দেওয়ার শব্দটি চমৎকার হত।

— রোবস

ভাল উত্তর, তবে আমি lorempixel.com এর পরিবর্তে picsum.photos ব্যবহার করার পরামর্শ দিচ্ছি

— আলেকসান্দার

Answer 7

আমার একটি ছোট প্লাগইন রয়েছে যা এটি পরিচালনা করে।

একে ওয়েটফোরআইমেজস বলা হয় এবং এটি সিএসএসেimg কোনও চিত্রের রেফারেন্স সহ উপাদান বা কোনও উপাদান হ্যান্ডেল করতে পারে div { background: url(img.png) }।

আপনি যদি সিএসএসে রেফারেন্সযুক্ত সমস্ত চিত্র সহ কেবল লোড করতে চান , আপনি এখানে এটি কীভাবে করবেন :)

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

Comments

এই প্লাগইনটি এমন চিত্রগুলির কারণ কি যা পৃষ্ঠায় প্রদর্শিত হয়নি যা এখনও লোড হয়ে যায় না, বা কেবল ইতিমধ্যে লোড হওয়া চিত্রগুলিতে ইভেন্ট সংযুক্ত করে?

— ডেভ ক্যামেরন

@ ডেভ ক্যামেরন ছবিগুলি দৃশ্যমান বা না থাকলে এটি সম্মান করে না। আপনি সহজেই এটিকে কাঁটাচামচ করতে পারেন এবং এই পরিবর্তনটি করতে পারেন - কেবলমাত্র :visibleকাস্টম নির্বাচনকারীতে যুক্ত করুন।

— অ্যালেক্স

এই প্লাগইনটি খুব আকর্ষণীয় দেখায়। যাইহোক, jquery ডকুমেন্টেশন হাইলাইট করে যে loadইভেন্টটি যখন চিত্রগুলিতে প্রয়োগ করা হয়: "ধারাবাহিকভাবে কাজ করে না বা নির্ভরযোগ্যভাবে ক্রস ব্রাউজার ব্যবহার করে না"। প্লাগইনটি কীভাবে এটি পরিচালনা করতে পেরেছিল?

— একাদশ

কাস্টম সিলেক্টর সম্পর্কিত উত্সটি দেখুন

— আলেক্স

@alex এই প্লাগইনটি কীভাবে CSS এ সেট করা চিত্রগুলি লোড করে: কোনও উপাদানকে হোভার করে? এটি আমার পক্ষে কাজ করে না

— ফিলিপ হফম্যান

Answer 8

আপনি কোথাও সিএসএস ব্যবহার করে আপনার এইচটিএমএলে চিত্রগুলি লোড করতে পারেন display:none; নিয়ম , তারপরে আপনি জেএস বা জ্যাকোয়ারি দিয়ে চাইলে সেগুলি দেখান

প্রিললোড করার জন্য জেএস বা জ্যাকুরি ফাংশনগুলি ব্যবহার করবেন না কেবল কার্যকর একটি সিএসএস নিয়ম বনাম জেএসের অনেকগুলি লাইন কার্যকর করতে হবে

উদাহরণ: এইচটিএমএল

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

CSS:

.hide{
display:none;
}

JQuery:

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

Jquery / জাভাস্ক্রিপ্ট দ্বারা চিত্রগুলি প্রিলোড করা ভাল নয় কারণ চিত্রগুলি পৃষ্ঠাতে লোড হতে কয়েক মিলিসেকেন্ড লাগবে + স্ক্রিপ্টটি বিশ্লেষণ ও সম্পাদন করার জন্য আপনার কাছে মিলি সেকেন্ড রয়েছে, বিশেষত যদি সেগুলি বড় চিত্র হয়, সুতরাং এইচটিএমএল এ লুকিয়ে রাখা পারফরম্যান্সের জন্যও ভাল, মৌমাছির বিন্দুমাত্র দৃশ্যমান না করে কারণ চিত্রটি সত্যিই প্রিলোড করা হয়, যতক্ষণ না আপনি এটি না দেখান!

Comments

এই পদ্ধতির উপর আরও তথ্য এখানে পাওয়া যাবে: perishablepress.com/…

— gdelfino

তবে আপনাকে সচেতন হওয়া দরকার যে এই কৌশলটিতে একটি বড় অসুবিধা রয়েছে: সমস্ত চিত্র লোড না হওয়া পর্যন্ত আপনার পৃষ্ঠা পুরোপুরি লোড হবে না। প্রিলোড করতে থাকা চিত্রগুলির সংখ্যা এবং তাদের আকারের উপর নির্ভর করে এটি কিছুটা সময় নিতে পারে। আরও খারাপ, যদি <img> ট্যাগটি কোনও উচ্চতা এবং প্রস্থ নির্দিষ্ট না করে তবে কিছু ব্রাউজার বাকী পৃষ্ঠাটি রেন্ডার করার আগে চিত্রটি আনার আগ পর্যন্ত অপেক্ষা করতে পারে।

@ অ্যালেক্স আপনি যেভাবেই ইম্জি লোড করতে হবে, আপনি এইচটিএমএল দিয়ে লোড করতে এবং কোনও ধরণের ঝলকানো এবং অর্ধেক বোঝা চিত্র এড়াতে বা আপনি স্থিতিশীল নয় এমন সমাধানের জন্য আরও গতি পেতে চান কিনা তা চয়ন করতে পারেন

— প্রথম

এছাড়াও আমি সত্যিই জাভাস্ক্রিপ্ট সঙ্গে এইচটিএমএল ট্যাগ তৈরি মনে সব শুধু আমার 2 সেন্ট এ অপাঠ্য হয়

— itsme

খুব জটিল প্রকল্পের জন্য আমার খুব দ্রুত সমাধানের প্রয়োজন ছিল এবং এটি ছিল।

— জীবাণু

Answer 9

এই jquery ইমেজ লোডার প্লাগইনটি মাত্র 1.39kb

ব্যবহার:

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

এছাড়াও আপনি বিকল্পগুলি সিঙ্ক্রোনালি বা অ্যাসিক্রোনালি এবং প্রতিটি পৃথক চিত্রের জন্য একটি সম্পূর্ণ ইভেন্ট লোড করতে চান কিনা এর মতো অন্যান্য বিকল্প রয়েছে।

Comments

@ আমিরআফ্রিদি এটা কেন?

— ইয়ান

@ আইয়ান কারণ ডকুমেন্টটি কলব্যাক চালিত হওয়ার আগেই ইতিমধ্যে প্রস্তুত। document (নথি)। প্রস্তুত আপনার ডিওএম লোড হয়েছে তা নিশ্চিত করার জন্য ব্যবহৃত হয়। যখন কলব্যাকের কথা আসে তখন এর অর্থ এই যে সমস্ত চিত্র লোড হয়েছে যার অর্থ হ'ল ইওরো ডম লোড হয়েছে তাই ডকুমেন্টের প্রয়োজন নেই। কলব্যাকের অভ্যন্তরে প্রস্তুত।

— আমির আফ্রিদি

@ আমিরআফ্রিদী কলব্যাকটিতে নথিটি প্রস্তুত রয়েছে এমন কোনও গ্যারান্টি নেই ... আপনি কোথা থেকে অনুমান করছেন? প্লাগিনের পৃষ্ঠায় এমন কিছু নেই যা বলছে যে allcompleteডম প্রস্তুত হওয়ার পরে কলব্যাক কার্যকর করা হবে। DOM প্রস্তুত হওয়ার পরে চিত্রগুলি লোড করা শেষ করার যথেষ্ট সম্ভাবনা রয়েছে, তবে ধরে নেওয়ার কোনও কারণ নেই। আমি জানি না কেন আপনি কলব্যাকগুলি যাদু বলে মনে করেন এবং ডম প্রস্তুত হওয়ার পরে মৃত্যুদন্ড কার্যকর করা হয় ... আপনি কোথা থেকে এটি পাচ্ছেন তা আপনি ব্যাখ্যা করতে পারেন? ইমেজগুলি লোড হওয়ার কারণে কেবল

— ইয়ান

@ আমিরআফ্রিদি এবং প্লাগইনটির জন্য ডকুমেন্টেশন এমনকি বলেছে: NB to use this as an image preloader simply put your $(document).ready(function(){}); into your 'allcomplete' event : > simples!... এটি সরাসরি এই উত্তরটি কী দেখায় তা প্রস্তাব দেয়।

— ইয়ান

@ আমিরআফ্রিদি এই পরিস্থিতিটির জন্য কোনও ধারণা রাখেনি। প্লাগইন একটি পূর্ব লোডার। আপনি যত তাড়াতাড়ি সম্ভব এটি কার্যকর করতে চান। এবং এমন প্রচুর জিনিস রয়েছে যা আপনি যত তাড়াতাড়ি সম্ভব ডায়মকে গুলি করতে চান এটি ডিওমের উপর নির্ভর করে না এবং তারপরে যখন ডম প্রস্তুত হয়, তখন কিছু করুন।

— আয়ান

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. */
});
​    ​

মনে রাখবেন যে আপনি যদি আই 7 সমর্থন করতে চান তবে আপনাকে এই সামান্য কম সুন্দর সংস্করণ ব্যবহার করতে হবে (এটি অন্যান্য ব্রাউজারগুলিতেও কাজ করে):

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

এর জন্য ধন্যবাদ! আমি জেপির উত্তরে কিছুটা রিফ যুক্ত করতে চাই - আমি জানি না এটি কারও সাহায্য করবে কিনা, তবে এইভাবে আপনাকে চিত্রের একটি অ্যারে তৈরি করতে হবে না, এবং আপনি যদি আপনার সমস্ত বড় চিত্রগুলি প্রিললোড করতে পারেন তবে আপনি আপনার থাম্বগুলি সঠিকভাবে নাম দিন। এটি সুবিধাজনক কারণ আমার কাছে এমন একজন আছেন যিনি এইচটিএমএলে সমস্ত পৃষ্ঠাগুলি লিখছেন, এবং এটি তাদের জন্য আরও একটি কম পদক্ষেপ নিশ্চিত করে - চিত্রের অ্যারে তৈরির প্রয়োজনীয়তা বাদ দিয়ে এবং অন্য পদক্ষেপে যেখানে জিনিসগুলি স্ক্রুযুক্ত হতে পারে।

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

মূলত, পৃষ্ঠার প্রতিটি চিত্রের জন্য এটি প্রতিটি চিত্রের এসআরসি আঁকড়ে ধরে থাকে, যদি এটি নির্দিষ্ট মানদণ্ডের সাথে মিলিত হয় (একটি থাম্ব, বা হোম পৃষ্ঠার চিত্র) এটি নামটি পরিবর্তন করে (চিত্রের সিআরসি-তে একটি প্রাথমিক স্ট্রিং প্রতিস্থাপন করে), তবে চিত্রগুলি লোড করে ।

আমার ক্ষেত্রে পৃষ্ঠাটি থাম্ব ইমেজ দ্বারা পূর্ণ ছিল সমস্ত নামযুক্ত চিত্র_th.jpg এর মতো, এবং সমস্ত সম্পর্কিত বড় ইমেজটির নাম দেওয়া হয়েছে image_lg.jpg। থাম্বটি বৃহত্তর মাত্র _th.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

এটি আইই 9 তেও আমার পক্ষে কাজ করে:

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

Comments

ক্যাশিংয়ের কারণে এটি শেষ পর্যন্ত ব্যর্থ হবে, সর্বদা src বৈশিষ্ট্যটি সেট করার আগে লোড ইভেন্টটিকে আবদ্ধ করুন।

— কেভিন বি

Answer 16

আমি গুগল ম্যাপস এপিআই কাস্টম ওভারলে দিয়ে এটি করতে চেয়েছিলাম। তাদের নমুনা কোডটি আইএমজি উপাদানগুলি sertোকাতে কেবল জেএস ব্যবহার করে এবং চিত্রটি স্থানধারক বাক্সটি চিত্রটি লোড না করা অবধি প্রদর্শিত হবে। আমি এখানে একটি উত্তর পেয়েছি যা আমার পক্ষে কাজ করেছে: 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মান যে iterated হচ্ছে নির্ধারিত হয়।

— ওয়েবাক

? [(['img1.jpg', 'img2.jpg', 'img3.jpg']) প্রতিটি (ফাংশন (সূচক, মান) so কনসোল.লগ (মান); // img1.jpg কনসোল.লগ (এটি) ; // স্ট্রিং {0 = "আমি", 1 = "এম", 2 = "জি", আরও ...} $ ('<img />')। অ্যাটর ('এসসিআর', এটি) বডি ')। সিএসএস (' প্রদর্শন ',' কিছুই নয় ');});

— শুক্র

হুঁ। আমার ধারণা আপনি ঠিক এখানে আছেন উদাহরণস্বরূপ $("div").each(function(i, el){ console.log(el == this);});সমস্ত উত্পন্ন করে true; অ্যারের ওপরে আইট্রেশন অন্যরকম আচরণ করে বলে মনে হচ্ছে।

— ওয়বিক

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

ওপিতে প্রশ্নটি সমাধান করতে সমাধান কীভাবে কাজ করে আপনি তার প্রসারিত করতে পারেন? এবং সম্ভবত আপনার কোডটি মন্তব্য করুন যাতে অন্যরা আরও সহজে বুঝতে পারে?

— রো ইয়ো মি মি

Answer 19

যারা অ্যাকশন স্ক্রিপ্ট কিছুটা জানেন তাদের জন্য, আপনি ন্যূনতম প্রচেষ্টা সহ ফ্ল্যাশ প্লেয়ারের জন্য পরীক্ষা করতে পারেন এবং একটি ফ্ল্যাশ প্রিলোডার তৈরি করতে পারেন, যা আপনি এইচটিএমএল 5 / জাভাস্ক্রিপ্ট / জ্যাকুরিতেও রপ্তানি করতে পারেন। ফ্ল্যাশ প্লেয়ার সনাক্ত না করা থাকলে এটি ব্যবহার করতে, এইচটিএমএল 5 প্লেয়ারে ফিরে ইউটিউবের ভূমিকা দিয়ে এটি কীভাবে করা যায় তার উদাহরণগুলি দেখুন: এবং আপনার নিজের তৈরি করুন। আমার কাছে বিশদ নেই, তবে আমি এখনও শুরু করি নি, যদি আমি ভুলে না যাই তবে আমি এটি পরে পোস্ট করব এবং আমার কাছে কিছু স্ট্যান্ডার্ড জ্যাকুরি কোড চেষ্টা করব।

Comments

এটি কোনও সমাধান নয়। ব্রাউজার ডিফল্টভাবে ফ্ল্যাশ প্লেয়ার সমর্থন করে না। এটি জাভাস্ক্রিপ্ট দিয়ে সহজেই অর্জন করা যায় যা নেটিভ ব্রাউজারের ভাষা।

— উসমান আহমেদ

আমার মনে আছে ২০১২ সালের ফ্ল্যাশ বিদ্বেষকারীরা ... এটি স্বাভাবিক ছিল না ... আমি যেখানেই গিয়েছিলাম সেখানেই আমি আক্রমণ করেছি যখন আমি এমনকি ফ্ল্যাশ শব্দটি ব্যবহার করি।

— পিটার গ্রুপ্পেলার