1

我正在尝试使用以下方法交换/动画预加载的 jpg 图像以预加载图像：

<img id="slideshow" src="../../Content/images/IM0-Frame1.jpg" alt="" width="200"
        height="200">
    <script type="text/javascript">
                $(document).ready(function () {
                    preload_images();
                  });
                function preload_images() {
                    var images = new Array();
                    for (var i = 1; i <= 126; i++) {
                        var str;
                        if (i < 10) {
                            str = i;
                        } else {
                            str = i;
                        }
                          images.src="../Content/images/IM0-Frame" + str + ".jpg";
                    }
                }
    </script>

我会很感激你的建议。

4

2 回答 2

1

您实际上并没有预加载图像，只是用它们的 url 填充一个数组，以预加载图像创建一个 Image 对象并将其 src 属性设置为图像 url。

var img = new Image();
img.src = "../Content/images/IM0-Frame" + str + ".jpg";
于 2012-08-28T18:00:26.403 回答
0

这是一个简单的幻灯片，它预加载图像，使用setInterval功能滑动它们并在鼠标悬停/离开时停止/恢复循环图像：

var images = [];
var i = 0;
var interval = null;

function preload_images() {
    for (var i = 0; i < 126; i++) {
        images[i] = new Image();
        images[i].src = "../Content/images/IM0-Frame" + i + ".jpg";
    }
}

preload_images();

function cycle_images() {
    i = (i < 2) ? i + 1 : 0;
    document.getElementById('slideshow').src = images[i].src;
}

$(document).ready(function() {
    interval = setInterval(cycle_images, 2000);
    $('#slideshow').hover(function() {
        clearInterval(interval);
    }, function() {
        interval = setInterval(cycle_images, 2000);
    });
});

小提琴示例

于 2012-08-28T19:50:18.787 回答