Ich habe eine Webseite, die ein großes Bild für den Hintergrund verwendet. Ich hatte gehofft, jQuery zu benutzen, um das Bild zu laden, sobald es heruntergeladen wurde (im Grunde die Art, wie bing.com sein Hintergrundbild lädt). Ist das mit jQuery möglich? Wenn ja, gibt es ein Plugin, das du empfehlen würdest?Fading in einem Hintergrundbild
Diese article kann u süchtig. Kopieren von dort:
HTML
<div id="loader" class="loading"></div>
CSS
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;
}
Javascript
// 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');
});
Sie können das Bild zuerst laden und dann, wenn es fertig geladen ist, als Hintergrundbild festlegen. Auf diese Weise lädt der Browser (hoffentlich) das Hintergrundbild aus dem Cache, anstatt es neu zu laden. Wie Sie es als Plugin angefordert:
$.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;
}
Benutzen Sie es wie folgt aus:
$('body').smartBackgroundImage('http://example.com/image.png');
Vielen Dank, aber wie kann ich das Hintergrundbild einblenden lassen ? – desbest
Hier ist ein Weg. In document.ready: '$ ('') .attr ('src', url) .load (funktion() { \t \t $ ('# yourContainerDiv'). Css ('backgroundImage', 'url (' images /dein Bild.png ')'); \t \t $ ('# yourContainerDiv'). FadeIn ('langsam'); \t}); }); 'Entschuldigung für die Formatierung. Fügen Sie Ihren Editor ein, um ihn zu lesen. Keine Code-Blöcke in Kommentaren erlaubt. –
Sie nicht CSS Hintergrundbilder verwenden können, weil es ein Ereignis zu befestigen, um das Laden der Bilder unmöglich ist (Soweit ich weiss).
Also werde ich es versuchen, aber noch nicht getestet:
HTML:
<body>
<div class="bgimage"><img src="/bgimage.jpg" ></div>
<div>
... content ...
</div>
</body>
CSS:
.bgimage { position: absolute: }
Javascript:
$(function() {
$(".bgimage")
.css("opacity",0);
.load(function() { $(this).fadeIn(); });
});
Sie können gehen mit der folgende Trick, sorry wenn es ein bisschen schmutzig ist.
Script:
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));
}
});
Markup:
<div class="Content">
<label>Search Bing</label>
<input type="text" />
<input type="button" value="search" />
</div>
<div class="box1"></div>
css:
.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;}
hoffe, das hilft
Eine kleine Probe auf: http://xgreen.co.uk/test.htm
http://www.techerator.com/2010/11/how-to-make-a-css-background-slideshow-with-jquery/ funktioniert – TFD