0

画像を div に読み込み、新しく読み込まれた画像へのカルーセルを開始しています。スクリプトで画像の幅を取得して設定できないことを除いて、すべてが正しく機能しています。

これは私が現在持っているものです...

画像サイズ関数を取得

function imgSize() {
    $('img').each(function() {
        var imgWidth = $(this).width();
        var imgHeight = $(this).height();
        $(this).attr('height', imgHeight);
        $(this).attr('width', imgWidth);
    });
}

新しいページの読み込み、画像サイズ関数の呼び出し、およびカルーセル関数

$('.menu a').live('click', function() {
        var id = $(this).attr('id');
        var page = id + '.html'
        $('#portfolio').load( page , function() {
            imgSize();
            $('#portfolio').carouFredSel(settings);
            $('#bodyFooter span').show();
        });
    });

ここで例を見ることができます: http://www.amandarecker.com/siteTest Beauty をクリックすると、すべての画像が重なり合うか、まったく表示されません。firebug でソースを表示すると、幅が 0 に設定されます。なぜですか?

うまくいけば、誰かが助けてくれます...ありがとう

4

3 に答える 3

4

私は間違っているかもしれませんが、おそらく画像の幅を速くしようとしているのでしょう。つまり、画像がまだ読み込まれていないため、幅が 0 を返しています。

関数に負荷を追加してみてください。

function imgSize(){
    $("img").load(function(){
        var width = $(this).width();
        var height = $(this).height();
        $(this).attr("width",width).attr("height",height);
    });
}

これは、画像が完全にロードされた後にのみ値を取得しようとします。

于 2012-04-25T16:21:11.790 に答える
2

画像のDOMにアクセスする必要がある場合は、次のことを試してください。

function imgSize() {
    $('img').each(function() {
        var imgWidth = $(this)[0].naturalWidth;
        var imgHeight = $(this)[0].naturalHeight;
        $(this).attr('height', imgHeight);
        $(this).attr('width', imgWidth);
    });
}

画像をどのように読み込んでいるかわかりませんが、例を次に示します。

function loadImage(src, f)
{ 
  var img = new Image();

  $(img).load(function() {
    $(this).hide();
     if(f) f(img);
  }).error(function() {
    return false;
  }).attr('src', src);
}

loadImage('path/to/image.png', function(image) {
  // access image.naturalWidth and image.naturalHeight here to get the dimensions
});

したがって、新しいhtmlをロードする場合（おそらく最初にページに挿入する必要があります）、次のことを試してください。

// passive (wait for load)
$(html).find('img').load(function() {
  var imgWidth = $(this).width();
  var imgHeight = $(this).height();
  //var imgWidth = $(this)[0].naturalWidth;
  //var imgHeight = $(this)[0].naturalHeight;
  $(this).attr('height', imgHeight);
  $(this).attr('width', imgWidth);
});

// aggressive (load them yourself)
$(html).find('img').each(function() {
  $this = $(this);
  loadImage($(this).attr('src'), function(image) {
    $this.attr('width', image.naturalWidth).attr('height', image.naturalHeight);
  });
});
于 2012-04-25T16:14:30.800 に答える
0

まず、js の回答は素晴らしいです。画像に width="xxx" height="xxx" を入力して、IMG タグを更新してみてください。Dom は img の高さを気にせず、その周りに展開できます。jsロードされていない画像の高さを理解していません-スクリプトの前にサイズを知る必要があり、最初にハードコードしてから上書きできます。

もう 1 つの方法は、非表示の div または lazyload に画像をロードし、その実行の完了時にスクリプトを実行することです。幸運を！

于 2013-04-16T23:19:28.180 に答える