3

画像を読み込んでフェードインしようとしています。動作しています。しかし、私が4つの画像を持っていると仮定しましょう。現在、私のスクリプトは、最初の画像ではなく、最後の画像をロードすることで機能します。jsに最初の画像をロードさせ、最初の画像がロードされた後に2番目の画像のロードを開始するにはどうすればよいですか？

これが私のコードです：

$(function(){
    $("a").click(function(){
        $("#load").load('load.html', function() {
            $('#load img').hide();
            alert($("#load img").length);

            $('#load img').each( function(){
                $(this).on('load', function () {
                    $(this).fadeIn();
                });
            });
        });
        return false;
    });
});
4

2 に答える 2

1

http://jsfiddle.net/5uNGR/15/を参照してください

ロード時に各画像でフェードインを実行しようとしないことを試してください。ただし、ロードイベントが発生するたびに、アニメーションキュー内の次の画像の正常性をテストしてから、アニメーションコールバックで次の画像かどうかを確認してください。準備ができています。これが機能するはずのスクリプトです。

ところで、画像の準備テストの詳細については、 http：//www.sajithmr.me/javascript-check-an-image-is-loaded-or-notを参照してください。

$(function () {
    // util fn to test if image loaded properly
    var isImgLoadOk = function (img) {
        if (!img.complete) { return false; }
        if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
            return false;
        }
        return true;
    };

    $("a").on('click', function () {

        $("#load").load('load.html', function () {

            var imgs = $('#load img').hide(), //create image array and hide (chaining)
                animIndex = 0, //position in the animation queue
                isFading = false; //track state of whether an animation is in prog

            // this is a load handler AND is called in the fadeIn callback if 
            // not at last image in the collection
            var fadeNextImg = function () {

                // make sure a load event didn't happen in the middle of an animation
                if (isFading) return;

                // last image in animation queue?
                var isLast = animIndex == imgs.length - 1;

                // get the raw image out of the collection and test if it is loaded happily
                var targetImage = imgs[animIndex];
                if (isImgLoadOk(targetImage)) {
                    // jQuery-up the htmlImage
                    targetImage = $(targetImage);

                    // increment the queue
                    animIndex++;

                    // set animation state - this will ignore load events
                    isFading = true;

                    // fade in the img
                    targetImage.fadeIn('slow', function () {
                        isFading = false;
                        // test to see if next image is ready to load by 
                        // recursively calling the parent fn
                        if (!isLast) fadeNextImg();
                    });

                }
            };

            imgs.on('load', fadeNextImg);

        });

        return false;
    });

});
于 2012-12-03T03:06:33.220 に答える
0

Ronのソリューションは、少し過剰に設計されたIMOです。アニメーションが開始する前にすべての画像をロードすることが実際に意図されている場合は、次のようなことを行うことができます。

$(function(){
    $("a").click(function(){
        $("#load").load('load.html', function() {
            $('#load img').hide(); // I would recommend using css to hide the image instead
            alert($("#load img").length);

            $("#load img").each(function(i, image) {
               setTimeout(function() { // For each image, set increasingly large timeout before fadeIn
                  $(this).fadeIn();
               }, 2000 * i);
            });
        });
        return false;
    });
});
于 2012-12-06T14:43:05.893 に答える