1

我正在尝试将几个图像加载到一个名为“images”的 div 中，当它们完成加载时，我希望它向下滑动 div“images”，这将显示刚刚加载到其中的实际图像，我有一个写出如何实现这一点有点麻烦。

这是我到目前为止所拥有的，它并不完全正确：

$('#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); } 

});
4

3 回答 3

1

只听图像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可用于检测触发事件的对象，以获取更多日期...

于 2013-02-28T12:03:41.947 回答
1

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

请参阅小提琴中的此示例：http: //jsfiddle.net/TFVc9/2/

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

    //...

   image.imagesLoaded( function() {image.slideDown(300)} );
});
于 2013-02-28T12:01:31.387 回答
0

试试下面的代码：

<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>
于 2013-02-28T12:25:32.627 回答