0

JavaScript の知識がありません。$('#image').reel画像の幅の値を取得できるように、画像が読み込まれるまでコードを遅らせようとしてい ます。

   stitched: imgwidth,
   loops: false,
   frames: 30,
   frame: 1,
   wheelable: false
   // speed: 0,
   // timeout: 1
}); 

function imageReel() {
    $('#image').empty();
    var image = '<img id="image" src=\'images/' + arrReel[imgcount] + '.png\' width="1000" height= "700" />';
    $('#image-wrapper').html(image);
    $('#image').reel({
        stitched: imgwidth,
        loops: false,
        frames: 30,
        frame: 1,
        wheelable: false
        // speed: 0,
        // timeout: 1
    });
    console.log(imgwidth);
}

最初の回答に基づく試行 1

 $('#image').empty();
        // var image = '<img id="image" src=\'images/'+arrReel[imgcount]+'.png\' width="1000" height= "700" />';

      $(function(){
      image=new Image();
      image = '<img id="image" src=\'images/'+arrReel[imgcount]+'.png\' width="1000" height= "700" />';

        image.onload=function(){
           $('#image-wrapper').html(image);
           $('#image').reel({

            stitched:    imgwidth,
            loops:       false,
            frames:       30,
            frame:        1,
            wheelable: false, 
            // speed:       0,
            // timeout:     1
          }); 
    };
    $('body').append(image);
});

結果。まだ幅が0で、複数の画像が作成されます

キリアンの答えに基づく試み2

 <div id="image-wrapper"><img id="image" src='images/outsidedark.png' width="1000" height= "700" onload="someFunction()" /></div>

        function someFunction()
        {
            console.log(imgwidth);
            $('#image').reel({

            // stitched:    3208,

            stitched:    imgwidth,
            loops:       false,
            frames:       30,
            frame:        1,
            wheelable: false, 
            // speed:       0,
            // timeout:     1
          });


        }

結果イメージがロードされ続けます。プラグインが原因で可能ですが、その関数を一度だけロードし、複数回ロードするにはオンロードが必要だと思います。幅はまだ 0 であり、無限ループに陥ったように 0 が表示され続けるというコンソール ログが原因です。

4

4 に答える 4

2

reeljqueryプラグインとは何かわかりません（プラグインですか？）...しかし、次のコードは実際の画像の幅と高さを示しています。

$(function(){
    var image=new Image();
    image.src='http://www.google.com/images/srpr/logo4w.png';

    image.onload=function(){
        console.log($(this).height());
        console.log($(this).width());
    };
    $('body').append(image);
});

これが役立つことを願っています。

于 2013-05-17T12:32:23.947 に答える
0

load()イベントを使用する必要があります。

$(window).load(function(){
  // your code here
});
于 2013-05-17T12:25:26.270 に答える