Mam stronę internetową, która używa dużego obrazu do swojego tła. Miałem nadzieję, że użyję jQuery do załadowania obrazu po jego pobraniu (w zasadzie sposób, w jaki bing.com ładuje swój obraz tła). Czy to możliwe z jQuery? Jeśli tak, czy istnieje wtyczka, którą polecasz?Zanikanie w obrazie tła
Ten article może być seful. Kopiowanie stamtąd:
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');
});
Najpierw można załadować obraz, a następnie, po zakończeniu ładowania, ustawić go jako obraz tła. W ten sposób przeglądarka (miejmy nadzieję) załaduje obraz tła z pamięci podręcznej zamiast pobrać go ponownie. Jak prosiłeś go jako plugin:
$.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;
}
używać go tak:
$('body').smartBackgroundImage('http://example.com/image.png');
Wielkie dzięki, ale jak mogę sprawić, że obraz tła zniknie ? – desbest
Oto jeden sposób. W document.ready: '$ ('') .attr ('src', url) .load (function() { \t \t $ ('# yourContainerDiv'). Css ('backgroundImage', 'url (' obrazy /Twój obraz.png ")"); \t \t $ ("# yourContainerDiv"). FadeIn ("wolno"); \t}); }); "Przepraszamy za formatowanie. Wklej do edytora, aby go przeczytać. Brak bloków kodu dozwolonych w komentarzach. –
Nie można używać obrazów tła CSS, bo to niemożliwe, aby dołączyć zdarzenia do ładowania obrazów (o ile mi wiadomo).
więc dam mu szansę, ale nie to przetestowane:
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(); });
});
Możesz iść z Następująca sztuczka, przepraszam, jeśli jest trochę brudna.
Scenariusz:
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;}
nadzieję, że to pomaga
Mała próbka na: http://xgreen.co.uk/test.htm
http://www.techerator.com/2010/11/how-to-make-a-css-background-slideshow-with-jquery/ works – TFD