জাভাস্ক্রিপ্ট সহ চিত্রগুলি প্রিলোড করা হচ্ছে

Question

আমি নীচে যে ফাংশনটি লিখেছিলাম তা কি বেশিরভাগগুলিতে চিত্রগুলি প্রিললোড করার জন্য, যদি না হয় তবে ব্রাউজারগুলি সাধারণত ব্যবহৃত হয়?

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

আমার কাছে ইমেজ ইউআরএলগুলির একটি অ্যারে রয়েছে যা আমি লুপ করছি এবং preloadImageপ্রতিটি URL এর জন্য ফাংশনটি কল করি ।

Comments

মনে রাখবেন যে কিছু (সমস্ত?) ব্রাউজারগুলি যদি আপনি এটি ব্যবহার না করেন তবে কিছু সেকেন্ডের পরে ছবিটি প্রকাশ করবে। এটি এড়াতে imgঅবজেক্টের একটি রেফারেন্স রাখুন , যেমন প্যারেন্ট স্কোপের একটি অ্যারেতে in

— তমলিন

"ছবিটি মুক্তি দিন" বলতে কী বোঝ? এটি যদি ব্রাউজার দ্বারা ক্যাশে করা হয়, তবে এটি সেখানেই থাকবে, তাই না?

— ফ্রান্সিস্ক

কিছুটা সংক্ষিপ্ত:(new Image()).src = url;

— মির্জমিয়ার

নোট করুন যখন ক্রোম ডেভটোল খোলা থাকে এবং নেটওয়ার্ক প্যানেলের মধ্যে 'অক্ষম চ্যাচ' সক্ষম করা হয়

— ওয়াইউ

এমনকি সংক্ষিপ্ত:new Image().src = url;

— ড্যানিয়েল এক্স মুর

Answer 1

হ্যাঁ. এটি সমস্ত বড় ব্রাউজারে কাজ করা উচিত।

Comments

মডারেটর দ্রষ্টব্য: দয়া করে এটিকে "উত্তর নয়" হিসাবে চিহ্নিত করা বন্ধ করুন। এটি আসলে জিজ্ঞাসা করা প্রশ্নের সরাসরি উত্তর। আপনি যদি উত্তরটি ভুল বলে মনে করেন, বা প্রমাণের সাথে অপর্যাপ্ত সমর্থন করেছেন, তবে এটি নীচে নামান ।

— কোডি গ্রে

Answer 2

এটি চেষ্টা করুন আমার মনে হয় এটি আরও ভাল।

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/

Comments

কোনও onloadচিত্রের জন্য কোনও হ্যান্ডলার নেই

— বেনি

কেন আপনি ভাল এটি ব্যাখ্যা করতে পারেন?

— জেজেজে

@ বিনিস আমার মনে হয় আপনি ভুল বোঝাবুঝি করছেন, চিত্রগুলি লোড করা অ্যাসিঙ্ক, সুতরাং আপনাকে onloadরাষ্ট্রটি পরিচালনা করতে হবে বা আপনি কেবল মেমোরিতে চিত্রগুলি ইনস্ট্যান্ট করছেন।

— বেনি

আপনি যদি এই সমাধানটি ব্যবহার করেন, তবে আই-ভেরিয়েবলের জন্য বর্ণ বিবরণটি ভুলে যাবেন না। অন্যথায় এটি বিশ্বব্যাপী সেট করা হবে যা ত্রুটি সৃষ্টি করতে পারে যা সমাধান করা সত্যিই কঠিন (যদি না আপনি জানেন যে আপনি for (var i = 0.....

— ভ্যারির

@ মোহাম্মার এর জন্য ধন্যবাদ, আমি আমার সরবরাহ করা লিঙ্কটি থেকে কোডটি অনুলিপি করেছি। আমি এখনই কোডটি সম্পাদনা করবোvar

— ক্লিংথ

Answer 3

আমার ক্ষেত্রে onloadইভেন্টের জন্য আপনার ফাংশনে একটি কলব্যাক যুক্ত করা দরকারী ছিল :

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

এবং তারপরে সমস্ত কিছুতে কলব্যাক দিয়ে প্রিললোড করার জন্য চিত্রগুলিতে ইউআরএলগুলির একটি অ্যারের ক্ষেত্রে এটি মোড়ানো করুন: https://jsfiddle.net/4r0Luoy7/

function preloadImages(urls, allImagesLoadedCallback){
    var loadedCounter = 0;
  var toBeLoadedNumber = urls.length;
  urls.forEach(function(url){
    preloadImage(url, function(){
        loadedCounter++;
            console.log('Number of loaded images: ' + loadedCounter);
      if(loadedCounter == toBeLoadedNumber){
        allImagesLoadedCallback();
      }
    });
  });
  function preloadImage(url, anImageLoadedCallback){
      var img = new Image();
      img.onload = anImageLoadedCallback;
      img.src = url;
  }
}

// Let's call it:
preloadImages([
    '//upload.wikimedia.org/wikipedia/commons/d/da/Internet2.jpg',
  '//www.csee.umbc.edu/wp-content/uploads/2011/08/www.jpg'
], function(){
    console.log('All images were loaded');
});

Answer 4

CSS2 বিকল্প: http://www.thecssninja.com/css/even-better-image-preloading-with-css2

body:after {
  content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
  display: none; 
}

CSS3 বিকল্প: https://perishablepress.com/preload-images-css3/ (এইচ / টি লিনহ বাঁধ)

.preload-images {
  display: none; 
  width: 0;
  height: 0;
  background: url(img01.jpg),
              url(img02.jpg),
              url(img03.jpg);
}

দ্রষ্টব্য: পাত্রে থাকা চিত্রগুলি display:noneপ্রিলোড নাও থাকতে পারে। সম্ভবত দৃশ্যমানতা: লুকানো আরও ভাল কাজ করবে তবে আমি এটি পরীক্ষা করিনি। এটি চিহ্নিত করার জন্য মার্কো দেল ভ্যালিকে ধন্যবাদ

Comments

ধন্যবাদ এমপ্লুঞ্জন যদিও এটি এই বিশেষ ক্ষেত্রে আমাকে সহায়তা করে না, এটি জেনে রাখা ভাল।

— ফ্রান্সিস্ক

আমি কি ঠিক বলছি এটি পৃষ্ঠাটির লোডিংকে কমিয়ে দেবে কারণ পৃষ্ঠাটি লোড ইভেন্টটি চালু করার আগে এই চিত্রগুলি ডাউনলোড করা দরকার?

— জাকুবিসন

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

— বুলিয়ান

এর সাথে কোনও উপাদানের পটভূমি চিত্রগুলি display: noneপ্রিলোড হবে না।

— মারকুইজো

এই পদ্ধতিটি কেবলমাত্র আমার জন্য কাজ করেছিল (1) আমি ব্যবহার করি নি display: none, (2) width/height: 0, (3) পুট ব্যবহার করেনি no-repeatএবং এমন একটি অবস্থান ব্যবহার করে যা চিত্রটি বাইরে থাকবে ( -<width>px -<height>pxআপনাকে সেখানে পাবেন, সুতরাং আপনার চিত্রগুলি যদি 100px হয়) উচ্চতা বা কম, আপনি ব্যবহার করতে পারেন 0 -100pxঅন্য কথায়, url(...) no-repeat 0 -100px।

— অ্যালেক্সিস Wilke

Answer 5

আমি আপনাকে কিছু সম্ভাব্য সমস্যা রোধ করার জন্য চেষ্টা / ধরার পরামর্শ দিচ্ছি:

গলি:

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

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

Comments

আমি মনে করি না জাভাস্ক্রিপ্টে চিত্র লোড করার সময় আপনি কীভাবে ত্রুটিগুলি ধরেন - _img.onerror এর মতো কিছু রয়েছে যা ব্যবহার করা উচিত (উচিত?)।

— গ্রেগেরি

"সম্ভাব্য সমস্যাগুলি" কী কী?

— কিসাকি

কমান্ড সমর্থন হিসাবে ইস্যু। আপনার সমর্থন করা প্রয়োজন এমন ব্রাউজারের জাভাস্ক্রিপ্ট কমান্ডের সমর্থন আছে কিনা তা দেখার জন্য "আমি কি ব্যবহার করতে পারি" সাইটটি দেখুন।

— ডেভ

Answer 6

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

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

এখানে চেষ্টা করে দেখুন , আমি কয়েকটি মন্তব্যও যুক্ত করেছি

Answer 7

const preloadImage = src => 
  new Promise(r => {
    const image = new Image()
    image.onload = r
    image.onerror = r
    image.src = src
  })


// Preload an image
await preloadImage('https://picsum.photos/100/100')

// Preload a bunch of images in parallel 
await Promise.all(images.map(x => preloadImage(x.src)))

Answer 8

হ্যাঁ এটি কাজ করবে, তবে ব্রাউজারগুলি আসল কলগুলি সীমাবদ্ধ করে (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;
}

Comments

আপনি কি এই ব্রাউজার সীমা সম্পর্কে কিছু রেফারেন্স লিঙ্ক করতে পারেন?

— নুলি

একটি রেফারেন্স খুঁজে পাওয়া শক্ত (কমপক্ষে আমি কখনই এটি পাইনি), তবে ক্রোম বিকাশকারী সরঞ্জামগুলিতে (এফ 12) ক্রোমের নেটওয়ার্ক ট্যাব ব্যবহার করে ক্যাশে এবং সার্ভার কলগুলি থেকে কী লোড হয়েছিল তা ঘনিষ্ঠভাবে দেখার সময় আমি এটি পরীক্ষা করার জন্য আমার নিজস্ব প্রকল্পটি ব্যবহার করেছি। আমি ফায়ারফক্সে এবং মোবাইল ব্যবহার করে একই আচরণ পেয়েছি।

— রবিন

-1 কারণ আমি এখানে প্রথম বাক্যে সাবধানতার সাথে দাবিটি পরীক্ষা করেছি এবং এটি মিথ্যা বলে পেয়েছি, কমপক্ষে আধুনিক ব্রাউজারগুলিতে। স্ট্যাকওভারফ্লো.com/a/56012084/1709587 দেখুন। হ্যাঁ, ব্রাউজারটি প্রেরণ করতে ইচ্ছুক সমান্তরাল HTTP অনুরোধের সর্বাধিক সংখ্যার একটি সীমা রয়েছে, তবে শেষ পর্যন্ত আপনি যে প্রশ্নটি প্র্রোড-ইমেজ কল করেন তাতে অনুরোধ করা যায় না, এমনকি আপনি যদি প্রশ্নটিতে দেখানো উপায়ে এটি করেন তবে।

— মার্ক অ্যামেরি

Answer 9

এখানে আমার পদ্ধতি:

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

Answer 10

ECMAScript 2017 সম্মতিযুক্ত ব্রাউজারগুলির জন্য সমাধান

দ্রষ্টব্য: আপনি বাবেলের মতো ট্রান্সপ্লার ব্যবহার করলে এটিও কাজ করবে।

'use strict';

function imageLoaded(src, alt = '') {
    return new Promise(function(resolve) {
        const image = document.createElement('img');

        image.setAttribute('alt', alt);
        image.setAttribute('src', src);

        image.addEventListener('load', function() {
            resolve(image);
        });
    });
}

async function runExample() {
    console.log("Fetching my cat's image...");

    const myCat = await imageLoaded('https://placekitten.com/500');

    console.log("My cat's image is ready! Now is the time to load my dog's image...");

    const myDog = await imageLoaded('https://placedog.net/500');

    console.log('Whoa! This is now the time to enable my galery.');

    document.body.appendChild(myCat);
    document.body.appendChild(myDog);
}

runExample();

আপনি সমস্ত চিত্র লোড হওয়ার জন্য অপেক্ষা করতে পারেন।

async function runExample() {
    const [myCat, myDog] = [
        await imageLoaded('https://placekitten.com/500'),
        await imageLoaded('https://placedog.net/500')
    ];

    document.body.appendChild(myCat);
    document.body.appendChild(myDog);
}

বা Promise.allএগুলি সমান্তরালে লোড করতে ব্যবহার করুন।

async function runExample() {
    const [myCat, myDog] = await Promise.all([
        imageLoaded('https://placekitten.com/500'),
        imageLoaded('https://placedog.net/500')
    ]);

    document.body.appendChild(myCat);
    document.body.appendChild(myDog);
}

প্রতিশ্রুতি সম্পর্কে আরও ।

"Async" ফাংশন সম্পর্কে আরও ।

ডেসট্রাকচারিং অ্যাসাইনমেন্ট সম্পর্কে ।

ECMAScript 2015 সম্পর্কে আরও ।

ECMAScript 2017 সম্পর্কে আরও ।

Answer 11

আমি নিশ্চিত করতে পারি যে প্রশ্নটিতে পদ্ধতির চিত্রগুলি ডাউনলোড এবং ক্যাশে হওয়ার জন্য ট্রিগার করার জন্য যথেষ্ট (যদি না আপনি আপনার প্রতিক্রিয়া শিরোনামের মাধ্যমে ব্রাউজারটিকে এটি করতে নিষেধ করেন) তবে কমপক্ষে:

• ক্রোম 74
• সাফারি 12
• ফায়ারফক্স 66
• প্রান্ত 17

এটি পরীক্ষা করার জন্য, আমি একটি বিড়ালছানা একটি ছবি পরিবেশন করার আগে 10 সেকেন্ডের জন্য প্রতিটি ঘুম যে বেশ কয়েকটি শেষ পয়েন্ট সহ একটি ছোট ওয়েবপ্যাপ তৈরি। তারপর আমি দুই ওয়েব পেজ, যার এক একটি অন্তর্ভুক্ত যোগ <script>ট্যাগ যা বিড়ালছানা প্রতিটি ব্যবহার লোড করা হয় preloadImageপ্রশ্নটি থেকে ফাংশন, এবং অন্যান্য যার ব্যবহার করে পৃষ্ঠাটি সমস্ত বিড়ালছানা অন্তর্ভুক্ত <img>ট্যাগ।

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

Https://github.com/ExplodingCabbage/preloadImage-test এ পরীক্ষা করার জন্য আমি যে অ্যাপ্লিকেশনটি ব্যবহার করেছি তা দেখতে বা চেষ্টা করে দেখতে পারেন ।

বিশেষত লক্ষ করুন যে এই কৌশলটি উপরের ব্রাউজারগুলিতে কাজ করে এমনকি চিত্রের সংখ্যাটি লুপ করা হচ্ছে এমন সমান্তরাল অনুরোধগুলির সংখ্যা ছাড়িয়ে যায় যা ব্রাউজার এক সময় করতে প্রস্তুত হয়, রবিনের উত্তর যা বলেছিল তার বিপরীতে যা বোঝায় তার বিপরীতে । আপনার চিত্রগুলির প্রিললোডটি যে হারে অবশ্যই ব্রাউজারটি কতগুলি সমান্তরাল অনুরোধগুলি প্রেরণ করতে ইচ্ছুক তার দ্বারা সীমাবদ্ধ থাকবে , তবে শেষ পর্যন্ত এটি আপনি যে প্রতিটি চিত্রের ইউআরএল কল করবেন তার জন্য অনুরোধ করবেpreloadImage() ।

Comments

চিত্রগুলি মেমরি বা ডিস্কে ক্যাশে হয়েছে কিনা তা বিবেচনা করে? মনে হচ্ছে @ ক্লিন্টঝ পদ্ধতির বিপরীতে ওপি পদ্ধতিটি ডিস্কে ক্যাশেড যা স্মৃতিতে ক্যাশে হয়ে যায়।

— ক্রিস এল

Answer 12

যে কোনও ইউআরএল থেকে প্রিলোড লোডের জন্য আপনি এই কোডটি সূচক। Html এ স্থানান্তর করতে পারেন

<link rel="preload" href="https://via.placeholder.com/160" as="image">

Answer 13

ব্রাউজারটি মাথার লিঙ্ক ট্যাগটি ব্যবহার করে সবচেয়ে ভাল কাজ করবে।

export function preloadImages (imageSources: string[]): void {
  imageSources
    .forEach(i => {
      const linkEl = document.createElement('link');
      linkEl.setAttribute('rel', 'preload');
      linkEl.setAttribute('href', i);
      linkEl.setAttribute('as', 'image');
      document.head.appendChild(linkEl);
    });
}