Question

我目前正致力于创建网页照片库。我有大量想要在页面加载后使用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"
)

Answer 1

您不能将字符串和循环连接在一起。您必须使用循环和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);
}

Answer 2

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

为了实现这一点，我建议修改预加载函数以获取单个数组对象，然后可以迭代，而不管有多少参数传递给函数。以下是示例函数定义：

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( 
    [ 
        "/images/first.png",
        "/images/second.png",
        "/images/third.png"
    ]
);

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

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

使用javascript＆amp;和页面加载后预加载图像for循环

2 个答案: