Question

我正在尝试将几个图像加载到一个名为“images”的div中，当它们完成加载时我想让它滑动div“图像”，这将显示刚刚加载到其中的实际图像，而我在找出如何实现这一目标时遇到一些麻烦。

这是我到目前为止所做的，这不太对：

$('#button').click(function() {
    var image=$('#images');

    $("<img>", {
        src: "http://www.klossal.com/images/klossviolins/home.jpg"
    }).appendTo("#images");
    $("<img>", {
        src: "http://www.klossal.com/images/klossviolins/inventory.jpg"
    }).appendTo("#images");
    $("<img>", {
        src: "http://www.klossal.com/images/klossviolins/services.jpg"
    }).appendTo("#images");

    if (image.get(0).complete) { image.slideDown(300); } 

});

Answer 1

有一个很好的jQuery插件可以在加载元素中的所有图像后触发事件： http://desandro.github.com/imagesloaded/

在小提琴中看到这个例子： http://jsfiddle.net/TFVc9/2/

$('#button').click(function() {
    var image=$('#images');

    //...

   image.imagesLoaded( function() {image.slideDown(300)} );
});

Answer 2

只是听一下图像load事件。在事件处理程序中计算图像，如果加载的图像数与所请求图像的数量相匹配，则启动该节目。

http://jsfiddle.net/ZsGHY/

var imgCount = 0;
var image=$('#images');
$('#button').click(function() {
    console.log("Loading...");

    $("<img>", {
        src: "http://www.klossal.com/images/klossviolins/home.jpg"
    }).appendTo("#images").load(onImage);
    $("<img>", {
        src: "http://www.klossal.com/images/klossviolins/inventory.jpg"
    }).appendTo("#images").load(onImage);
    $("<img>", {
        src: "http://www.klossal.com/images/klossviolins/services.jpg"
    }).appendTo("#images").load(onImage);

});

function onImage(e)
{
    console.log("Image loaded");
    imgCount++;

    if (imgCount == image.children().length)
    {
        image.slideDown(3000);
    }
}

.load(function name)表示我们附加了一个事件监听器，它将监听load事件，一旦发生，该函数将被执行。

onLoad(e){}表示名为onLoad的函数接受一个参数 - 该参数从事件侦听器传递，它是一个event对象。在函数内部，e可用于检测触发事件的对象，以便更多地约会某个日期......

Answer 3

尝试以下代码：

<script>
$(document).ready(function () {
        $('#button').click(function() {

            $('#theDiv').prepend('<img id="theImg" src="http://www.klossal.com/images/klossviolins/home.jpg" />')
            $('#theDiv').prepend('<img id="theImg" src="http://www.klossal.com/images/klossviolins/inventory.jpg" />')
            $('#theDiv').prepend('<img id="theImg" src="http://www.klossal.com/images/klossviolins/services.jpg" />')
            $('#theDiv').prepend('<img id="theImg" src="http://www.klossal.com/images/klossviolins/services.jpg" />')
            $('#theDiv').hide();

            $('#theDiv').slideDown('slow', function() {
            // Animation complete.
            });
        });
    });
</script>

在滑动div之前等待加载多个图像

3 个答案: