Tôi có một trang web sử dụng hình ảnh lớn cho nền của nó. Tôi đã hy vọng sử dụng jQuery để tải hình ảnh sau khi nó được tải xuống (về cơ bản là cách bing.com tải hình nền của nó). Điều này có thể thực hiện được với jQuery không? Nếu vậy, có một plugin mà bạn muốn giới thiệu?Làm mờ trong hình nền
article này có thể là u seful. Sao chép từ đó:
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');
});
Trước tiên, bạn có thể tải hình ảnh và sau đó, khi nó đã tải xong, hãy đặt nó làm hình nền. Bằng cách đó, trình duyệt sẽ (hy vọng) tải hình nền từ bộ nhớ cache thay vì tải xuống lại. Như bạn yêu cầu nó như là một 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;
}
Sử dụng nó như thế này:
$('body').smartBackgroundImage('http://example.com/image.png');
Cảm ơn rất nhiều, nhưng làm thế nào tôi có thể làm cho hình nền mờ đi ? – desbest
Đây là một cách. Trong document.ready: '$ ('') .attr ('src', url) .load (function() { \t \t $ ('# yourContainerDiv') .ss ('backgroundImage', 'url (' images) /hình ảnh của bạn.png ')'); \t \t $ ('# yourContainerDiv'). FadeIn ('slow'); \t}); }); 'Xin lỗi về định dạng. Dán trong trình soạn thảo của bạn để đọc nó. Không cho phép các khối mã trong nhận xét. –
Bạn không thể sử dụng hình nền CSS, bởi vì nó không thể đính kèm một sự kiện để tải các hình ảnh (theo như tôi biết).
Vì vậy, tôi sẽ cho nó một shot, nhưng đã không kiểm tra nó:
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(); });
});
Bạn có thể đi với thủ thuật sau đây, xin lỗi nếu một chút bẩn.
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;}
hy vọng điều này giúp
Một mẫu nhỏ trên: http://xgreen.co.uk/test.htm
http://www.techerator.com/2010/11/how-to-make-a-css-background-slideshow-with-jquery/ works – TFD