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

要素内のすべての画像が読み込まれた後にイベントをトリガーする優れたjQueryプラグインがあります：http： //desandro.github.com/imagesloaded/

Fiddleのこの例を参照してください：http： //jsfiddle.net/TFVc9/2/

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

    //...

   image.imagesLoaded( function() {image.slideDown(300)} );
});
于 2013-02-28T12:01:31.387 に答える
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が1つの引数を取ることを意味します。この引数はイベントリスナーから渡され、eventオブジェクトです。関数内ではe、イベントをトリガーしたオブジェクトを検出し、日付をさらにゲートするために使用できます...

于 2013-02-28T12:03:41.947 に答える
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 に答える