Question

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

<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机器上运行。

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

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

Answer 1

不是单独加载图像，而是可以加载一次，只向左移动它们的容器。

假设您有宽度设置为300px的图像：

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向左移动直到所有图像都显示为<{1}}来设置动画

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

1 个答案: