Question

我正在尝试使用以下内容交换/动画预装的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>

感谢您的建议。

Answer 1

你实际上并没有预先加载图像，只是用数字填充数组，预加载图像创建一个Image对象，将其src属性设置为图像URL。

var img = new Image();
img.src = "../Content/images/IM0-Frame" + str + ".jpg";

Answer 2

这是一个简单的幻灯片，它预加载图像，使用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);
    });
});

fiddle example

jquery swap / animate数组的连续jpg图像

2 个答案: