दिलचस्प पोस्ट
PHP के साथ MySQL डाटाबेस में सरणी डालें रेट्रोफिट 2 के साथ लॉगिंग इसका अर्थ क्या है? कार्यवाही के नीचे छाया निकालें scanf का उपयोग करते हुए विभाजन गलती एक मजबूत, resizable स्विंग शतरंज जीयूआई बनाना GetImageData () त्रुटि को ठीक कैसे करें कैनवास को क्रॉस-मूल डेटा से दूषित कर दिया गया है? ऐलोॉक इनट के बजाय नए का उपयोग करें क्या सीएम या इंच में एंड्रॉइड की शारीरिक स्क्रीन ऊंचाई तय करने का कोई तरीका है? कार्यात्मक, घोषणात्मक और आज्ञाकारी प्रोग्रामिंग MySQL – समूह में नहीं एक कॉलम का चयन करके एंड्रॉइड फाइल चयनकर्ता ब्लैकबेरी में एक सूचीफिल्ड को कैसे अनुकूलित करें? एंड्रॉइड: अलार्म मैनेजर का उपयोग कैसे करें जावा में थ्रेड को ठीक से कैसे रोकें?

मैं कैसे जांच सकता हूं कि पृष्ठभूमि छवि भरी हुई है या नहीं?

मैं शरीर टैग पर एक पृष्ठभूमि छवि सेट करना चाहता हूं, फिर कुछ कोड चलाएं – इस तरह से:

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

मैं कैसे सुनिश्चित कर सकता हूं कि पृष्ठभूमि की छवि पूरी तरह भरी हुई है?

वेब के समाधान से एकत्रित समाधान "मैं कैसे जांच सकता हूं कि पृष्ठभूमि छवि भरी हुई है या नहीं?"

इसे इस्तेमाल करे:

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

यह स्मृति में नई छवि बनाएगा और लोड होने पर लोड घटना का उपयोग करेगा जब स्रोत लोड होता है।

मेरे पास एक jQuery प्लग इन है जिसे waitForImages कहा जाता है, जो पृष्ठभूमि छवियों को डाउनलोड करते समय पता लगा सकते हैं।

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

कुछ इस तरह:

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

सीएसएस संपत्तियों के लिए कोई जेएस कॉलबैक नहीं हैं I

यह एक छोटा सा प्लगइन है जो मैंने आपको ऐसा करने की अनुमति देने के लिए बनाया है, यह कई पृष्ठभूमि छवियों और कई तत्वों पर काम करता है:

यह पढ़ो:

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

https://github.com/alexanderdickson/waitForImages

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

मैं यह संभव बनाने के लिए एक शुद्ध जावास्क्रिप्ट हैक किया

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