0

我一直在阅读处理网站图像的最佳方法（当用户单击元素时循环显示图像），并且似乎预加载器是有利的。

假设您可以取出预加载器，并且当前设置将简单地将 image1 从数组中插入到 div 中，预加载器是否通过在开始时包含所有潜在的 HTML 请求来工作，因此减少了以后的潜在加载时间，或者这是一个无用的实现正如它所写的那样？

我真的应该从 中获取图像imageObj吗.append(...)？

-注意 - 我知道我实际上只允许按原样调用 image1，但这只是一种练习。

HTML

<body>
    <a href='#' id="image1">
    Click for image 1
    </a>
    <hr/>
    <a href='#' id="image2">
    Click for image 2
    </a>
    <hr/>
    <a href='#' id="image3">
    Click for image 3
    </a>
    <hr/>
    <a href='#' id="image4">
    Click for image 4
    </a>
    <div id="image">
    </div>
</body>

JavaScript/jQuery

// JavaScript Document

function preloader() 
{
    var i = 0;

    imageObj = new Image();

    images = new Array();
    images[0]="images/image1.jpg"
    images[1]="images/image2.jpg"
    images[2]="images/image3.jpg"
    images[3]="images/image4.jpg"

    for(i=0; i<=3; i++) 
    {
        imageObj.src=images[i];
    }
}

$(document).ready(function(){

    preloader();

    $('#image1').click(function(){
        alert("Handler for #image1 .click() called.");
        $('#image').append('<img id="theImg" src=' + images[0] + ' />');
    });

});
4

1 回答 1

0

此代码的效果是“触摸”每个可能的图像，以便将其加载到您的缓存中，而不是加载到您的 DOM 中（如果有意义的话）。

我真的应该从 .append(...) 中的 imageObj 获取图像吗？

不，那部分只是强制 get 将图像预加载到浏览器缓存中。请注意它是如何在循环中几乎立即被覆盖的。

如果您想要极快的加载速度，那么还可以考虑让您的图像来自多个子域或 CDN。

于 2012-06-12T14:06:19.850 回答