在动画之前等待图像重新加载答案

【问题标题】：Wait for image to re-load before animation在动画之前等待图像重新加载
【发布时间】：2014-10-15 22:51:22
【问题描述】：

我有一个应用程序将照片列表加载到数组中，然后一张一张地显示这些照片。它应该被设计为将图像隐藏在右侧的窗口之外。然后图像应该从右向左滑入，直到它碰到左窗口边框。但是，在加载下一张图片时，如果图片需要一段时间才能加载旧图片，则会滑入。一旦新图片加载完毕，动画完成后会替换旧图片。

<body>
    <img id="bg" class="clicky" alt=""></img>
more html...
</body>


function nextImage(){ // Load the next image and slide in from the right
    raterReset(); // Function to reset keyboard hotkeys
    loadImage(); // VBScript function to read the next image and make the filename
    $("#bg").finish();
    updateContainer(); // Function that obtains the window h/w and aspect ratio of image
    showStatus("Next Image Loaded: " + intPhotoCount + " of " + intFileCount);
    $("#bg").animate({left: "+="+winW}, 0,function(){
        $("#bg").attr("src",objOriginFile);
        $("#bg").animate({left: "-="+winW}, 1500);
    });
}

我尝试过使用：

$("#bg").attr("src",objOriginFile).load(function(){
    $("#bg").animate({left: "-="+winW}, 1500);
});

第一张图片效果很好，但随后第二张图片像预期的那样滑入并继续运行第二次幻灯片动画，它消失在窗口的左侧。在第三张图像上，图像已经太靠右了，超出了窗外。

这里是实际 HTA 的链接。这必须在带有 IE 8+ 的 windows box 上运行。

https://dl.dropboxusercontent.com/u/52558409/Photorater/Photorater.zip

注意：我知道我的代码不是最好的，我可能做了很多不应该做的事情。请温柔:)

【问题讨论】：

标签： javascript jquery html autoresize aspect-ratio

【解决方案1】：

您可以加载一次并仅将其容器移动到左侧，而不是单独加载图像。

假设您的图片宽度设置为 300 像素：

CSS：

#wrapper {
    display: block;
    width: 300px;
    overflow: hidden;
}

#images-container {
    display: block;
    width: 1200px; /* the width is calculated as NO_OF_IMAGES*IMAGE_WIDTH */
    position: relative;
}

#images-container img {
    display: inline-block;
}

HTML：

<div id="wrapper">
    <div id="images-container">
        <img ... />
        <img ... />
        <img ... />
        <img ... />
    </div>
</div>

JS：通过将#image-container 向左移动直到显示所有图像来为#image-container 设置动画

【讨论】：

如果我理解正确，这实际上会在应用程序启动时加载所有图像。如果我有 1,000 张照片，这可能需要很长时间。特别是如果照片是通过网络传输的。仅在单击“下一个图像”时才需要加载图像。它是保持纵横比的全屏图像。如果我只有几张照片，你的回答会奏效。我会在以后的项目中记住这一点。谢谢。
其实我采纳了你的建议，几乎完全重写了我的申请。如果有很多图像，加载图像确实需要一些时间，但是一旦完成，性能提升是值得的。如果您有大约 50-100 张图像，那一点也不差。谢谢！
如果您想玩 HTA 或查看我的代码，可以下载我上面的应用程序的 2.0.0 版本。我对当前加载的图像的纵横比做了一些很酷的事情，以及它如何在调整大小时自动适应屏幕。