अगर एक पृष्ठभूमि छवि लोड हो रही है तो मैं कैसे जांच सकता हूं?

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()

— Css

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

यह मेमोरी में नई छवि बनाएगा और src लोड होने पर पता लगाने के लिए लोड इवेंट का उपयोग करेगा।

Comments

ऐसा लगता है कि छवि को बिना किसी कारण के दो बार लोड किया जाएगा।

— हैडर

@gAMBOOKa उन्हें एक बार लोड किया जाता है क्योंकि वे ब्राउज़र मेमोरी में रहते हैं। यह वही है, जब आप अपने पृष्ठ के शीर्ष में छिपी हुई छवियां डालते हैं और फिर इसे सीएसएस में सेट करते हैं - इसलिए छवियां सीएसएस फ़ाइल से पहले डाउनलोड करना शुरू कर देती हैं - इसे प्री लोडिंग कहा जाता है।

— ज्यूबिक

मुझे बहुत यकीन नहीं है, लेकिन मुझे लगता है कि आप कैश का जिक्र कर रहे हैं। मुझे नहीं लगता कि ब्राउज़र मेमोरी के रूप में ऐसी कोई चीज़ है जहां संपत्ति संग्रहीत की जाती है। यदि आप कैश का उल्लेख कर रहे हैं, तो याद रखें कि आप एक अतिरिक्त HTTP अनुरोध जोड़ रहे हैं और सभी क्लाइंट के पास कैश सक्षम नहीं हो सकता है।

— 17

किसी भी पृष्ठ में इसे दर्ज करें जिसमें 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)'); }))और Firebug में HTTP अनुरोधों की जांच करें। अगर मैंने एक अन्य टैब में खोली गई इस छवि के साथ झिलमिलाहट पृष्ठ खोला है, तो यह कोई HTTP अनुरोध नहीं करता है बस इस तस्वीर को तुरंत दिखाएं। और जब मैंने कैश साफ़ किया और इसे चलाया तो एक ही निवेदन था।

— ज्यूबिक

इस परीक्षण और इस के बीच एक तुलना से पता चलता है कि आपको मेमोरी लीक से बचने के लिए ऑब्जेक्ट .remove()पर कॉल करना होगा $('<img/>')। आपको पहले परीक्षण पर एक स्थिर मेमोरी खपत और दूसरे पर एक मेमोरी वृद्धि दिखनी चाहिए। क्रोम 28 पर चलने के कुछ घंटों के बाद, पहला परीक्षण 80MB और दूसरा 270MB लेता है।

— बेवॉच

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कॉलबैक का उपयोग करके लोडिंग प्रगति दिखाने में सक्षम होने के लिए भी बहुत अच्छा है ।

— सोवियुत

@alex, मुझे कक्षा में प्रत्येक तत्व के लिए प्रत्येक पृष्ठभूमि की छवि कैसे जांचनी चाहिए? मैंने यह कोशिश की, लेकिन यह सही नहीं लगता है। INR

— Relm

@Relm आप इसका सही उपयोग नहीं कर रहे हैं। दूसरी कॉलबैक प्रति छवि है। इसके अलावा, 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 को सेट करता हूं bg.replace( ... , my_src )। लेकिन मेरा सवाल है: एक बार $ ('<img>') लोड हो जाता है, वास्तव में उसके साथ क्या होता है <img>... मेरा मतलब है कि यह वास्तव में वास्तविक नहीं है - यह सिर्फ एक डमी प्लेसहोल्डर है, है ना?

— dsdsdsdsd

सही। <img>डोम में डाला कभी नहीं है; इसका उपयोग केवल ब्राउज़र को छवि फ़ाइल को कैश में लोड करने के लिए "मूर्ख" करने के लिए किया जाता है।

— कॉलिन

अगर आप jQuery

— vwvan

Answer 4

CSS संपत्तियों के लिए कोई JS कॉलबैक नहीं हैं।

Comments

तेजी से उत्तर के लिए धन्यवाद। समाधान समाधान के लिए कोई विचार?

— पीटर

लेकिन वहाँ उन लोगों के लिए जे एस समाधान जो देख रहा है stackoverflow.com/questions/5057990/...

— 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

अधूरा समाधान।

— टॉम थॉमसन

@TomThomson धन्यवाद टॉम, मुझे छवि संक्रमण ठीक से काम नहीं मिला, इसे ठीक किया

— Godblessstrawberry

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

मैंने एक ऐसा समाधान निकाला है जो मेरे लिए बेहतर काम करता है, और जिसे कई छवियों के साथ प्रयोग करने योग्य होने का लाभ होता है (उदाहरण में इस उदाहरण में चित्रित नहीं किया गया है)।

इस सवाल पर @ adeneo के जवाब से :

यदि आपके पास पृष्ठभूमि छवि के साथ एक तत्व है, तो इस तरह

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

आप छवि URL प्राप्त करने के लिए पृष्ठभूमि के लिए प्रतीक्षा कर सकते हैं और इसे एक ओनलोड हैंडलर के साथ जावास्क्रिप्ट में छवि ऑब्जेक्ट के लिए उपयोग कर सकते हैं

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')";

सीएसएस:

.image_error {
    display: none;
}

Answer 9

https://github.com/alexanderdickson/waitForImages

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