Question

我写了一个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>

Answer 1

我做过的两件事

为我想要处理的每张图片放置<img>标记（显示：无，因为它们不可见）
添加＆＃34; onload＆＃34;属于触发改变图片之间可见性的函数的主体。

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

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

动态图像资源的Javascript性能？

1 个答案: