HTML

Question

我一直在阅读处理网站图像的最佳方式（当用户点击元素时循环显示图像）并且看起来预加载器是有利的。

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

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

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

});

Answer 1

此代码的效果是只是“触摸”每个可能的图像，以便它加载到缓存中，但如果有意义则不会加载到DOM中。

我是否应该从.append（...）中的imageObj中获取图像？

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

如果您想要起泡加载速度，那么还要考虑让您的图片来自多个子域或CDN。

这个预加载器有效吗？它不用于显示状态，只是为了以后加速可能的图像加载

HTML

的JavaScript / jQuery的

1 个答案: