使用javascript&for循环加载页面之前预加载图像
问题描述:
我目前正在创建网页照片库。我有一大堆图片,我想用Javascript 预加载后页面加载。而不是在我的阵列中有一个非常长的HTML链接列表,是否可以使用for
循环?请参阅我的下面的代码。我非常感谢任何关于我在for循环中做错的有用见解!谢谢!!使用javascript&for循环加载页面之前预加载图像
<script type="text/javascript">
function preloader() {
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
var i=1;
"http://example.com/images/gallery/elephants-" + for (i=1;i<=5;i++) {document.write(i);} + ".jpg",
"http://example.com/images/gallery/penguins-" + for (i=1;i<=2;i++) {document.write(i);} + ".png"
)
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(preloader);
</script>
我有一个问题的部分是在preload()
部分for
循环。该preload()
部分应输出/做到这一点:
preload(
"http://example.com/images/gallery/elephants-1.jpg",
"http://example.com/images/gallery/elephants-2.jpg",
"http://example.com/images/gallery/elephants-3.jpg",
"http://example.com/images/gallery/elephants-4.jpg",
"http://example.com/images/gallery/elephants-5.jpg",
"http://example.com/images/gallery/penguins-1.png",
"http://example.com/images/gallery/penguins-2.png"
)
答
不能连接字符串和循环在一起。你必须使用一个循环和push方法来构建一个字符串数组:
var i, urls = [];
for(i = 1; i <= 5; i++)
urls.push('http://example.com/images/gallery/elephants-' + i + '.jpg');
for(i = 1; i <= 2; i++)
urls.push('http://example.com/images/gallery/penguins-' + i + '.jpg');
然后使用apply调用预载功能和数组中传递的参数:
preload.apply(null, urls);
所以你的整个预加载功能变为:
function preloader() {
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
var i, urls = [];
for(i = 1; i <= 5; i++)
urls.push('http://example.com/images/gallery/elephants-' + i + '.jpg');
for(i = 1; i <= 2; i++)
urls.push('http://example.com/images/gallery/penguins-' + i + '.jpg');
preload.apply(null, urls);
}
答
您已经定义了一个预载功能是接受零个参数,而你试图在多个ARG传递进入预加载功能。此外,您使用分号分隔参数而不是所需的逗号。
为了达到这个目的,我建议修改预加载函数以获取一个可以迭代的单个数组对象,而不管有多少参数传递给该函数。下面是一个示例函数定义:
function preload(arr) {
for(var i = 0; i < arr.length; i++) {
var img = document.createElement("img");
img.setAttribute("style","display:none");
img.setAttribute("src",arr[i]);
document.body.appendChild(img);
}
}
要使用的功能,你会通过在阵列中的网址为使用JavaScript对象表示法来表示该阵列的预载功能。
preload(
[
"/images/first.png",
"/images/second.png",
"/images/third.png"
]
);
此数组包含3个字符串,并且每个3个字符串将被传递到一个单独的,隐藏的图像标签的src属性。
我唯一的声明与我的具体例子是某些版本的IE浏览器可能会或可能不会缓存隐藏的图像。无论何时您使用原始JavaScript,而不是像jQuery这样的库,您都需要在每个浏览器中进行全面测试,以确保该解决方案具有交叉兼容性。也许你可以简单地修改你的函数来接受正确的参数,然后使用你现有的技术来预先载入图像,假设你是一个经过验证的测试解决方案,你知道在你打算支持的所有浏览器中都可以。
谢谢保罗!我非常感谢帮助!你的解决方案完美无缺 – kaffolder
没问题@kaffolder :) – Paulpro