动态图像资源的 Javascript 性能？答案

【问题标题】：Javascript Performance for Dynamic Image Resouce?动态图像资源的 Javascript 性能？
【发布时间】：2016-07-28 17:58:58
【问题描述】：

我编写了一个可以在两张图片之间快速切换的 HTML 页面。在result 中，我可以看到第一张图片被冻结了大约一分钟，然后它们开始快速而漂亮地翻转。就好像第一张图片加载很快，第二张需要更多时间（它们的大小完全相同）

什么可以解释这种行为？
我应该怎么做才能让它们从一开始就翻转？

代码：

<head>
    <title>Visualize</title>
    <script src="jquery-3.1.0.min.js"></script>
    <script>
        $(document).ready(function()
        {
            var file = "a";
            setInterval(function()
            {
                 $('.canvas').attr("src","images/"+ file +".png");

                 file = flipFile(file);
            }, 290);
        });
        function flipFile(file)
        {
            if(file=="a")
            {
                file="b";
            } 
            else if(file=="b")
            {
                file = "a";
            }

            return file;
        }
    </script>
</head>
<body>
    <div class="container">
        <img class="canvas" src="/images/file.png">
    </div>        
</body>

【问题讨论】：

您检查过第二张图片的大小了吗？您是否也尝试过更改 setInterval 值？
一个是相对路径，一个是根目录，但听起来图像加载需要一段时间，可能需要预加载或使用 onload 而不是准备好。
是的，预加载图像。您也可以将您的 JS 移动到 <body> 标签的底部。这样你就不需要.ready 回调了。
你能详细说明一下预加载吗？

标签： javascript jquery html performance

【解决方案1】：

我做了两件事

为我要处理的每张图片放置<img>标签（显示：无，因为它们不可见）
在正文中添加了“onload”属性，可触发更改图片之间可见性的功能。

这样页面会等待它们加载，然后才启动功能。

`function visualize()
{
    $('.loading').fadeOut(1000);
    $('.blanket').fadeIn(1000);
    setInterval(function()
    {
        $('.i'+fileIdx).show();
        $('.i'+filePrevIdx).hide();
        filePrevIdx = fileIdx;
        fileIdx = addCyclic(fileIdx);
    }, 290);
}`

`<body style="background-color: black;" onload="visualize()">
    <div class="container">
        <div class = "blanket" style="display: none;"></div>
        <div class="loading">
            Loading...
        </div>
        <img class="i1" src="./images/1.png" style="display: none;">
        <img class="i2" src="./images/2.png" style="display: none;">
        <img class="i3" src="./images/3.png" style="display: none;">
        <img class="i4" src="./images/4.png" style="display: none;">
    </div>
</body>`

【讨论】：