这个预加载器工作吗?它不用于显示状态，只是加快了以后可能的图像加载速度

Is this preloader working? It's not being used to show status, just speed up possible image loading for later

本文关键字：加载 速度 图像 状态 工作 显示 用于      更新时间：2023-09-26

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

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

我真的应该从.append(...)的imageObj拍摄图像吗？

-注意 - 我知道我实际上只允许调用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] + ' />');
    });
});

这段代码的效果是只"触摸"每个可能的图像，这样它就会被加载到你的缓存中，而不是你的 DOM（如果这有意义的话）。

我实际上应该从 .append（...） 中的 imageObj 中获取图像吗？

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

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

相关文章：