मेरे पास एक वेब पेज है जो इसकी पृष्ठभूमि के लिए एक बड़ी छवि का उपयोग करता है। मैं डाउनलोड करने के बाद छवि लोड करने के लिए jQuery का उपयोग करने की उम्मीद कर रहा था (मूल रूप से जिस तरह से bing.com अपनी पृष्ठभूमि छवि लोड करता है)। क्या यह jQuery के साथ संभव है? यदि हां, तो क्या कोई प्लगइन है जिसे आप अनुशंसा करेंगे?पृष्ठभूमि छवि में फ़ेडिंग
यह article आप हो सकता है seful। वहाँ से कॉपी करना:
एचटीएमएल
<div id="loader" class="loading"></div>
सीएसएस
DIV#loader {
border: 1px solid #ccc;
width: 500px;
height: 500px;
}
/**
* While we're having the loading class set.
* Removig it, will remove the loading message
*/
DIV#loader.loading {
background: url(images/spinner.gif) no-repeat center center;
}
जावास्क्रिप्ट
// when the DOM is ready
$(function() {
var img = new Image();
// wrap our new image in jQuery, then:
$(img)
// once the image has loaded, execute this code
.load(function() {
// set the image hidden by default
$(this).hide();
// with the holding div #loader, apply:
$('#loader')
// remove the loading class (so no background spinner),
.removeClass('loading')
// then insert our image
.append(this);
// fade our image in to create a nice effect
$(this).fadeIn();
})
// if there was an error loading the image, react accordingly
.error(function() {
// notify the user that the image could not be loaded
})
// *finally*, set the src attribute of the new image to our image
.attr('src', 'images/headshot.jpg');
});
आप पहली बार छवि लोड कर सकते हैं, और फिर, जब यह लोड हो गया है, इसे पृष्ठभूमि-छवि के रूप में सेट करें। इस तरह ब्राउज़र (उम्मीद है) पृष्ठभूमि छवि को फिर से लोड करने के बजाय कैश से लोड करेगा। आप एक प्लगइन के रूप में यह अनुरोध किया के रूप में:
$.fn.smartBackgroundImage = function(url){
var t = this;
//create an img so the browser will download the image:
$('<img />')
.attr('src', url)
.load(function(){ //attach onload to set background-image
t.each(function(){
$(this).css('backgroundImage', 'url('+url+')');
});
});
return this;
}
इस तरह का प्रयोग करें यह:
$('body').smartBackgroundImage('http://example.com/image.png');
बहुत बहुत धन्यवाद, लेकिन मैं पृष्ठभूमि छवि को कैसे फीका कर सकता हूं ? – desbest
यहां एक तरीका है। Document.ready: '$ ('') .attr ('src', url) .load (function() { \t \t $ ('# yourContainerDiv')। Css ('backgroundImage', 'url (' छवियां /आपका प्रतिबिम्ब।पीएनजी ')'); \t \t $ ('# yourContainerDiv')। FadeIn ('slow'); \t}); }); प्रारूपण के लिए क्षमा करें। इसे पढ़ने के लिए अपने संपादक में पेस्ट करें। टिप्पणियों में कोई कोड ब्लॉक की अनुमति नहीं है। –
आप, सीएसएस पृष्ठभूमि छवियों का उपयोग नहीं कर सकते हैं क्योंकि यह छवियों के लोड करने के लिए एक घटना संलग्न करने के लिए असंभव है (जहाँ तक मुझे पता है)।
तो मैं इसे एक शॉट दे देंगे, लेकिन यह परीक्षण नहीं किया:
HTML:
<body>
<div class="bgimage"><img src="/bgimage.jpg" ></div>
<div>
... content ...
</div>
</body>
सीएसएस:
.bgimage { position: absolute: }
जावास्क्रिप्ट:
$(function() {
$(".bgimage")
.css("opacity",0);
.load(function() { $(this).fadeIn(); });
});
आप के साथ जा सकते निम्नलिखित चाल, माफ करना अगर यह थोड़ा गंदा है।
स्क्रिप्ट:
jQuery.preloadImages = function() {
for (var i = 0; i < arguments.length; i++) {
jQuery("<img>").attr("src", arguments[i]);
$('.box1').attr('preloadURL', arguments[0]);
}
}
$.preloadImages("sky.jpg");
$(document).ready(function() {
if ($('.box1').attr('preloadURL') == 'sky.jpg') {
$('.box1').css({ 'background-image': 'url(sky.jpg)' },$('.box1').fadeIn(1000));
}
});
मार्कअप:
<div class="Content">
<label>Search Bing</label>
<input type="text" />
<input type="button" value="search" />
</div>
<div class="box1"></div>
सीएसएस:
.box1 {background-repeat:no-repeat; width:800px; height:600px; display:none; position:relative;}
.Content { position:absolute; left:20px; top:20px; z-index:100;}
.Content label { color:White;}
आशा है कि यह मदद करता है
एक छोटी सी नमूना पर: http://xgreen.co.uk/test.htm
http://www.techerator.com/2010/11/how-to-make-a-css-background-slideshow-with-jquery/ काम – TFD