使用javascript＆for循环加载页面之前预加载图像

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> 

我有一个问题的部分是在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" 
) 

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.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

您已经定义了一个预载功能是接受零个参数，而你试图在多个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这样的库，您都需要在每个浏览器中进行全面测试，以确保该解决方案具有交叉兼容性。也许你可以简单地修改你的函数来接受正确的参数，然后使用你现有的技术来预先载入图像，假设你是一个经过验证的测试解决方案，你知道在你打算支持的所有浏览器中都可以。