3

我目前正在创建一个网页照片库。我有很多图像我想在页面加载后用 Javascript 预加载。与其在我的数组中拥有一个非常非常长的 HTML 链接列表，是否可以利用for循环？请看我下面的代码。任何关于我在 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>

我遇到问题的部分是该部分中的for循环preload()。该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"
)
4

2 回答 2

3

您不能将字符串和循环连接在一起。您必须使用循环和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 函数并将该数组作为参数传递：

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);
}
于 2012-05-06T02:34:36.150 回答
0

您已经定义了一个采用零参数的预加载函数，但您正试图将多个参数传递给预加载函数。此外，您使用分号而不是必需的逗号来分隔参数。

为此，我建议修改您的预加载函数以获取单个数组对象，然后您可以迭代该对象，而不管将多少参数传递给函数。下面是一个示例函数定义：

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 对象表示法将 URL 数组传递给 preload 函数来表示该数组。

preload( 
    [ 
        "/images/first.png",
        "/images/second.png",
        "/images/third.png"
    ]
);

该数组包含 3 个字符串，这 3 个字符串中的每一个都将被传递到单独的隐藏图像标签的 src 属性中。

我对具体示例的唯一免责声明是某些版本的 IE 可能会也可能不会缓存隐藏的图像。无论何时使用原始 JavaScript，而不是像 jQuery 这样的库，您都需要在每个浏览器中进行彻底的测试，以确保解决方案是交叉兼容的。也许您可以简单地修改您的函数以接受正确的参数，然后使用您现有的技术来预加载图像，假设您的解决方案是一个久经考验的解决方案，您知道它适用于您计划支持的所有浏览器。

于 2012-05-06T02:36:52.537 回答