কোনও পটভূমি চিত্র লোড হয়েছে কিনা তা আমি কীভাবে পরীক্ষা করতে পারি?

Question

আমি বডি ট্যাগে একটি পটভূমি চিত্র সেট করতে চাই, তারপরে কিছু কোড চালাও - এর মতো:

$('body').css('background-image','http://picture.de/image.png').load(function() {
    alert('Background image done loading');
    // This doesn't work
});

আমি কীভাবে নিশ্চিত করতে পারি যে পটভূমি চিত্রটি পুরোপুরি লোড হয়েছে?

Comments

শুধু একই URL টি ধার্য Image()বস্তুর আছে onloadইভেন্ট।

— শেডো উইজার্ড আপনার পক্ষে

সিএসএস ইউআরএলটি মোড়ানো নিশ্চিত করুনurl()

— bluescrubbie

Answer 1

এটা চেষ্টা কর:

$('<img/>').attr('src', 'http://picture.de/image.png').on('load', function() {
   $(this).remove(); // prevent memory leaks as @benweet suggested
   $('body').css('background-image', 'url(http://picture.de/image.png)');
});

এটি মেমরিতে নতুন চিত্র তৈরি করবে এবং এসসিআর কখন লোড হবে তা সনাক্ত করতে লোড ইভেন্ট ব্যবহার করবে।

Comments

দেখে মনে হচ্ছে যে কোনও কারণ ছাড়াই চিত্রটি দুটিবার লোড হবে।

— হায়দার

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

— jcubic

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

— হায়দার

Jquery আছে এমন যে কোনও পৃষ্ঠাতে এটি প্রবেশ করুন: javascript:void($('<img/>').attr('src', 'http://farm6.static.flickr.com/5049/5220175127_5693faf952.jpg').load(function() { $('html').css('background-image', 'url(http://farm6.static.flickr.com/5049/5220175127_5693faf952.jpg)'); }))এবং ফায়ারবগে HTTP অনুরোধগুলি পরীক্ষা করুন check যদি আমি এই ছবিটি দিয়ে ফ্লিকার পেজটি অন্য ট্যাবে খোলেন তবে এটি কোনও HTTP অনুরোধ না করে কেবল এই ছবিটি তাত্ক্ষণিকভাবে দেখায়। এবং যখন আমি ক্যাশেটি সাফ করি এবং এটিকে চালিত করি তখন একটি অনুরোধ ছিল।

— jcubic

এর মধ্যে একটি তুলনা এই পরীক্ষাটি এবং এই এক শো আপনাকে কল করার আছে .remove()উপর $('<img/>')বস্তু একটি মেমরি লিক এড়ানো। প্রথম পরীক্ষায় আপনার একটি স্থিতিশীল মেমরি খরচ এবং দ্বিতীয়টিতে মেমরির বৃদ্ধি হওয়া উচিত। ক্রোম 28 এ কয়েক ঘন্টা চলার পরে, প্রথম পরীক্ষাটি 80MB এবং দ্বিতীয়টি 270MB নেয়।

— benweet

Answer 2

আমার কাছে একটি jQuery প্লাগইন রয়েছে যা waitForImagesপটভূমি চিত্রগুলি ডাউনলোড করার সময় সনাক্ত করতে পারে।

$('body')
  .css('background-image','url(http://picture.de/image.png)')
  .waitForImages(function() {
    alert('Background image done loading');
    // This *does* work
  }, $.noop, true);

Comments

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

— সোভিয়েট

@ অ্যালেক্স, ক্লাসে প্রতিটি উপাদানগুলির জন্য আমি কীভাবে প্রতিটি পটভূমি চিত্রটি পরীক্ষা করব? আমি এটি চেষ্টা করেছি তবে মনে হচ্ছে এটি সঠিকভাবে করা যাচ্ছে না। $ ('। ব্যবহারকারীর_মিনি_ফোটো_থম্ব') wait

— রিয়েলম 26'15

@ সেলম আপনি এটি সঠিকভাবে ব্যবহার করছেন না। দ্বিতীয় কলব্যাক প্রতি চিত্র। এছাড়াও,delay() মতো কাজ করে না।

— অ্যালেক্স

Answer 3

এটার মতো কিছু:

var $div = $('div'),
  bg = $div.css('background-image');
  if (bg) {
    var src = bg.replace(/(^url\()|(\)$|[\"\'])/g, ''),
      $img = $('<img>').attr('src', src).on('load', function() {
        // do something, maybe:
        $div.fadeIn();
      });
  }
});

Comments

হ্যালো ... এটি কাজ করছে বলে মনে হচ্ছে, যদিও আমি বিজি.প্লেসটি সেট করেছি bg.replace( ... , my_src )। তবে আমার প্রশ্নটি হ'ল একবার $ ('<img>') বোঝা হয়ে গেলে এর সাথে ঠিক কী ঘটে <img>... মানে এটি আসলে বাস্তব নয় - এটি কেবল একটি ডামি স্থানধারক, তাই না?

— ডিএসডিএসডিএসডিএসডি

ঠিক। <img>DOM মধ্যে ঢোকানো হয় না; এটি কেবল চিত্রটিকে ক্যাশে লোড করার জন্য ব্রাউজারটিকে "বোকা বানানোর" জন্য ব্যবহৃত হয়েছিল।

— কলিন

সহায়ক যদি আপনি jQuery না চান

— vwvan

Answer 4

সিএসএস সম্পদের জন্য কোনও জেএস কলব্যাক নেই।

Comments

দ্রুত উত্তর দেওয়ার জন্য ধন্যবাদ। কাজের সমাধানের জন্য কোনও ধারণা?

— পিটার

তবে যারা স্ট্যাকওভারফ্লো // সন্ধানগুলি

— Godblessstrawberry

Answer 5

খাঁটি জেএস সমাধান যা প্রিলোডার যুক্ত করবে, পটভূমি-চিত্রটি সেট করবে এবং তারপরে এটি ইভেন্ট শ্রোতার সাথে আবর্জনা সংগ্রহের জন্য সেট করবে :

সংক্ষিপ্ত সংস্করণ:

const imageUrl = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
let bgElement = document.querySelector("body");
let preloaderImg = document.createElement("img");
preloaderImg.src = imageUrl;

preloaderImg.addEventListener('load', (event) => {
    bgElement.style.backgroundImage = `url(${imageUrl})`;
    preloaderImg = null;
});

সুন্দর অস্বচ্ছ রূপান্তর সহ কিছুটা দীর্ঘ:

const imageUrl = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
let bgElement = document.querySelector(".bg-lazy");
bgElement.classList.add("bg-loading");
let preloaderImg = document.createElement("img");
preloaderImg.src = imageUrl;

preloaderImg.addEventListener('load', (event) => {
  bgElement.classList.remove("bg-loading");
  bgElement.style.backgroundImage = `url(${imageUrl})`;
  preloaderImg = null;
});

.bg-lazy {
  height: 100vh;
  width: 100vw;
  transition: opacity 1s ease-out;
}

.bg-loading {
  opacity: 0;
}

<div class="bg-lazy"></div>

Comments

আন্ডাররেটেড সমাধান।

— টম থমসন

@ টমথমসন টমকে ধন্যবাদ জানায়, আমি দেখতে পেলাম চিত্রের উত্তরণটি সঠিকভাবে কাজ করে নি, এটি ঠিক করে দিয়েছে

— গডবেলসস্ট্রোবেরি

Answer 6

আপনাকে ঠিক এটি করার অনুমতি দেওয়ার জন্য তৈরি একটি ছোট প্লাগইন এখানে রয়েছে, এটি একাধিক পটভূমি চিত্র এবং একাধিক উপাদানগুলিতেও কাজ করে:

নিবন্ধটি পড়ুন:

http://catmull.uk/code-lab/background-image-loaded/

অথবা সরাসরি প্লাগইন কোডে যান:

http://catmull.uk/downloads/bg-loaded/bg-loaded.js

সুতরাং কেবল প্লাগইনটি অন্তর্ভুক্ত করুন এবং তারপরে এটিকে উপাদানটিতে কল করুন:

<script type="text/javascript" src="http://catmull.uk/downloads/bg-loaded/bg-loaded.js"></script>
<script type="text/javascript">
   $('body').bgLoaded();
</script>

স্পষ্টতই প্লাগইনটি ডাউনলোড করুন এবং এটি আপনার নিজস্ব হোস্টিংয়ে সঞ্চয় করুন।

ডিফল্টরূপে এটি ব্যাকগ্রাউন্ড লোড হয়ে গেলে প্রতিটি মিলিত উপাদানগুলিতে একটি অতিরিক্ত "বিজি-লোডড" শ্রেণি যুক্ত করে তবে আপনি সহজেই এটিকে আলাদা ফাংশনটি পাস করে পরিবর্তন করতে পারবেন:

<script type="text/javascript" src="http://catmull.uk/downloads/bg-loaded/bg-loaded.js"></script>
<script type="text/javascript">
   $('body').bgLoaded({
      afterLoaded : function() {
         alert('Background image done loading');
      }
   });
</script>

এখানে একটি কোডেপেন এটি কাজ করে দেখায়।

http://codepen.io/catmull/pen/Lfcpb

Answer 7

আমি এমন একটি সমাধান খুঁজে পেয়েছি যা আমার পক্ষে আরও ভাল কাজ করেছে এবং এর বেশ কয়েকটি চিত্রের ব্যবহারযোগ্য হওয়ার সুবিধা রয়েছে (এই উদাহরণে উদাহরণস্বরূপ চিত্রিত নয়)।

এই প্রশ্নে @ অ্যাডিনিওর উত্তর থেকে :

আপনার যদি পটভূমি চিত্রের সাথে একটি উপাদান থাকে তবে এটি

<div id="test" style="background-image: url(link/to/image.png)"><div>

আপনি ওভারলোড হ্যান্ডলারের সাহায্যে জাভাস্ক্রিপ্টে কোনও চিত্রের জন্য এটি ব্যবহার করতে ইমেজ ইউআরএল পেয়ে পটভূমিটি লোড হওয়ার জন্য অপেক্ষা করতে পারেন

var src = $('#test').css('background-image');
var url = src.match(/\((.*?)\)/)[1].replace(/('|")/g,'');

var img = new Image();
img.onload = function() {
    alert('image loaded');
}
img.src = url;
if (img.complete) img.onload();

Answer 8

এটি সম্ভব করার জন্য আমি খাঁটি জাভাস্ক্রিপ্ট হ্যাক করেছি।

<div class="my_background_image" style="background-image: url(broken-image.jpg)">
<img class="image_error" src="broken-image.jpg" onerror="this.parentElement.style.display='none';">
</div>

অথবা

onerror="this.parentElement.backgroundImage = "url('image_placeHolder.png')";

CSS:

.image_error {
    display: none;
}

Answer 9

https://github.com/alexanderdickson/waitForImages

$('selector').waitForImages({
    finished: function() {
       // ...
    },
    each: function() {
       // ...
    },
    waitForAll: true
});