1

画像がクリックされたときにギャラリーから画像をロードするライトボックスを作成しました(一度に1つずつ)。問題は、画像が読み込まれないため、画像のサイズがわからないことです。コードは次のとおりです。

function showimage(image_path) {
    imgobj = new Image();
    imgobj.src = image_path;
    var aspectratio = imgobj.width/imgobj.height;
    var newht = imgobj.height;
    var newwd = imgobj.width;
    if (($(window).height() - 100) < newht) {
        newht = $(window).height() - 100;
        newwd = newht*aspectratio;
    }
    if (($(window).width() - 100) < newwd) {
        newwd = $(window).width() - 100;
        newht = newwd/aspectratio;
    }
    $('#lightbox img').attr('height', newht);
    $('#lightbox img').attr('width', newwd);
    $('#lightbox').show();
}

onLoad を使用してみましたが、すぐにトリガーされ、画像がまだ読み込まれておらず、適切な画像サイズが得られません。ここで、画像がブラウザーに既に読み込まれている場合、onLoad が即座に呼び出されることを読みました。

他の場所では、時間遅延「setTimeout」を使用するように提案されていますが、画像のサイズが異なる可能性があり、読み込みに時間がかかる可能性があるため、それは良い解決策ではないようです。

この問題を回避する方法を提案できますか。

編集1：

以下の回答に感謝します。load() を使用して機能を動作させることができます。ただし、画像が既に読み込まれており、ライトボックスに表示されていた場合は、もう一度クリックします。load() 内の関数は呼び出されず、ライト ボックスは表示されません。助言がありますか？

編集2：

解決策：これは私のために働いたものです：

function showimage(image_path) {
    imgobj = new Image();
    imgobj.src = image_path;
    if (imgobj.complete == false)
        $(imgobj).load(function(){processimage(imgobj);});
    else
        processimage(imgobj);
}

function processimage(imgobj) {
    var aspectratio = imgobj.width/imgobj.height;
    var newht = imgobj.height;
    var newwd = imgobj.width;
    if (($(window).height() - 100) < newht) {
        newht = $(window).height() - 100;
        newwd = newht*aspectratio;
    }
    if (($(window).width() - 100) < newwd) {
        newwd = $(window).width() - 100;
        newht = newwd/aspectratio;
    }
    $('#lightbox img').attr('height', newht);
    $('#lightbox img').attr('width', newwd);
    $('#lightbox').show();
}
4

3 に答える 3

0

これは私にとってはうまくいきました。画像オブジェクトを再利用しています。

$(document).ready(function () {
    var imgobj = new Image();
    function showimage(image_path) {
        imgobj.src = image_path;
        if (imgobj.complete == false)
            $(imgobj).load(function(){processimage(imgobj);});
        else
            processimage(imgobj);
    }

    function processimage(imgobj) {
        var aspectratio = imgobj.width/imgobj.height;
        var newht = imgobj.height;
        var newwd = imgobj.width;
        if (($(window).height() - 100) < newht) {
            newht = $(window).height() - 100;
            newwd = newht*aspectratio;
        }
        if (($(window).width() - 100) < newwd) {
            newwd = $(window).width() - 100;
            newht = newwd/aspectratio;
        }
        $('#lightbox img').attr('height', newht);
        $('#lightbox img').attr('width', newwd);
        $('#lightbox').show();
    }
});
于 2013-06-27T22:42:57.907 に答える
0

関数の問題は、関数で新しい画像オブジェクトを作成し、そこにパスを追加することだと思いますが、実際の画像はその時点で読み込まれません。あなたがしたいことは、オブジェクトを設定し、パスを追加してからロードすることです:

   function showimage(image_path) {
        imgobj = new Image();
        imgobj.src = image_path;
        //load the image:
        $(imgobj).load(function(){
           var aspectratio = imgobj.width/imgobj.height;
           var newht = imgobj.height;
           var newwd = imgobj.width;
           if (($(window).height() - 100) < newht) {
               newht = $(window).height() - 100;
               newwd = newht*aspectratio;
           }
           if (($(window).width() - 100) < newwd) {
              newwd = $(window).width() - 100;
              newht = newwd/aspectratio;
           }
           $('#lightbox img').attr('height', newht);
           $('#lightbox img').attr('width', newwd);
           $('#lightbox').show();
        });
    }

フィドルのデモ: http://jsfiddle.net/5d7mM/

于 2013-06-24T06:46:09.950 に答える
0

常に画像の高さと幅にアクセスしたい場合は、別のアプローチを取り、jqueryhide()とshow()関数を使用できます。

このようにして、画像は常に読み込まれ、画像がクリックされたときにのみ表示されるため、ユーザーは読み込んで高さと幅にアクセスできるようになります。

于 2013-06-24T06:40:45.500 に答える