我正在寻找一种使用JavaScript预加载图像的快捷方法.我正在使用jQuery,如果这很重要的话.
我在这里看到了这个(http://nettuts.com ...):
function complexLoad(config, fileNames) {
for (var x = 0; x < fileNames.length; x++) {
$("<img>").attr({
id: fileNames[x],
src: config.imgDir + fileNames[x] + config.imgFormat,
title: "The " + fileNames[x] + " nebula"
}).appendTo("#" + config.imgContainer).css({ display: "none" });
}
};
但是,它看起来有点过头了我想要的东西!
我知道有jQuery插件可以做到这一点,但它们看起来都有点大(大小); 我只需要快速,简单和简短的预加载图像方式!
如果我有一个图像文件名数组,
var preload = ["a.gif", "b.gif", "c.gif"];
我想在循环中预加载它们,是否有必要每次都创建一个图像对象？下面列出的所有方法都有效吗？一个更好吗？
一个.
var image = new Image();
for (i = 0; i < preload.length; i++) {
image.src = preload[i];
}
B.
var image;
for (i = 0; i < preload.length; i++) {
image = new Image();
image.src = preload[i];
}
C.
var images = [];
for (i = 0; i < preload.length; i++) {
images[i] = new Image();
images[i].src = preload[i];
}
谢谢!
我试图删除Chrome中的闪烁,FF虽然在FF中更少.该脚本根据水平鼠标位置滚动20个背景jpg.这种作品但非常闪烁.
jQuery的
$( document ).ready( function() {
var xSlider = $("#third"); //cache
var loopvar = 10; //set start img to 10
xSlider.css({backgroundImage : 'url(images/' + loopvar + '.jpg)'});
document.onmousemove = function(e){
var mouseposimg = Math.floor(e.pageX / Math.floor($(window).width() / 20) + 1);
if (mouseposimg > 20) { mouseposimg = 21; } //if outside browser
if (mouseposimg < 0) { mouseposimg = 1; }
if(loopvar != mouseposimg) {
xSlider.css({backgroundImage : 'url(images/' + mouseposimg + '.jpg)'});
loopvar = mouseposimg;
}
};
});
CSS …
我已经整理了一个非常类似于flickr photostream功能的脚本.两个缩略图彼此相邻,当您单击下一个或上一个链接时,下一个(或上一个)两个图像会滑入.酷!
目前,当页面加载时,它会加载两个图像.第一次使用nxt/prv然后通过ajax加载接下来的两个图像或前两个图像,第一个图像的id在url中传递,两个新图像的HTML返回并通过ajax显示.
很简单,但它让我思考,在一个缓慢的连接,或沉重的服务器加载然后两个图像,虽然相对较小的缩略图仍然需要一段时间来加载,而滑动窗格的好东西是隐藏数据的事实在没有加载延迟的情况下快速平滑地滑动.
所以我从表现和良好实践的角度来看,哪种选择最好,这是我现在能想到的,对建议持开放态度.
1,通过JSON调用每组图像(它应该是快速的？)
2,将所有可能的图像加载到json文件中并以这种方式提取细节 - 尽管浏览器仍然需要加载图像.有时可能会有4张图片,有时可能会有1000张图片!
3,通过php将10张图像加载到Json或其他文件中,并将所有10张图像加载到浏览器中,隐藏8张未显示的图像,并始终显示中间的两张图像.这里的问题是,每次有人点击时,文件都必须重新加载第一张和最后一张图片,这仍然需要时间,尽管我认为中间图像现在已经全部通过浏览器缓存了.但仍然有加载时间.
4,是否可以使用包含所有图像细节的json图像(无论数字如何)并使用上面的3来加载其中10个图像,是否可以使用ajax只读取10行并保留最后一个指针一个它读取,所以json文件可以快速加载,短刷新和图像任何一方通过浏览器缓存!
希望这清楚,有关如何处理这个的任何建议？