我刚刚为幻灯片编写了一段 js 代码,仅使用一张图像( Sprite )。使用 js,我正在更改背景位置以更改可见图像。
var first = true;
function galesprite() {
if (first) {
var bg_pos = '0px 0px';
first = false;
} else {
var bg_pos = $("#gmap").css('background-position');
}
/* Sub función para cuando termine la animación de fadeOut, sinó la foto se
* cambia antes y no crea el efecto deseado. */
$("#gmap").fadeOut(1000, function() {
var xy = bg_pos.split(' ');
var y = xy[1].split('px');
var newy = parseInt(y) + 200;
var bgpos = xy[0] + ' ' + newy + 'px';
$('#gmap').css('background-position', bgpos);
$("#gmap").fadeIn(1000);
setTimeout('galesprite()', 4000);
});
}
受影响的html是这样的。使用一个放置背景图像的 css 类,一组垂直图像。每个图像的高度为 200 像素。
<div id="gmap"></div>
#gmap {
height: 200px;
width: 270px;
background-image: url('../images/diapositiva-home/surf.jpg');
background-position: 0px 0px;
}
我所做的是定期循环增加 div 的背景 Y 位置。所以看起来这改变了形象。 这个想法是使用 Sprite 来最小化页面的加载时间,而不是加载 10 个图像。 你认为我有什么可以改进的地方吗?谢谢。
最佳答案
Sprite 最适合小图标 - 而不是大画廊。
如果您有 600kb 的 Sprite ,那么在整个内容下载完成之前您将无法显示第一张图像(异常(exception)情况)。
我通常会避免使用大型 JPEG 的 Sprite ,而只是做一个...
var img = new Image();
img.onload = function() {
// Loaded, we can now show the next image
}
img.src = 'bob.jpg';
这意味着您可以在显示当前图像的同时下载下一张图像,并在知道下载完成后切换到该图像。
关于带有一个 Sprite 的 Javascript 照片幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4279593/