1

小さなサムネイル画像がたくさんあるサイトでは、各画像の読み込み中にプレースホルダー gif を使用したいと考えていました。これには、次のようなコードが必要です。

$('.this_img').each(function () {
    var $this_img = $(this);
    var $this_src = $(this).find('.sliderImage:first').attr('src');
    var img = new Image();
    // wrap our new image in jQuery, then:
    $(img)
        // set minimum dimensions
        .css({
            'min-height': '35px',
            'min-width': '40px'
        })
        // once the image has loaded, execute this code
        .load(function () {
                // set the image hidden by default    
                $(this).hide();

                // with the holding div #loader, apply:
                $this_img
                    // remove the loading class (so no background spinner), 
                    .removeClass('loading')
                    // then insert our image
                    .prepend(this);

                // fade our image in to create a nice effect
                $(this).fadeIn();
            })

        // if there was an error loading the image, react accordingly
        .error(function () {
            // notify the user that the image could not be loaded
        })

        // *finally*, set the src attribute of the new image to our image
        .attr('src', $this_src);
});

これは、スタイルシートで指定されたプレースホルダーでうまく機能しますが、これらの画像が短すぎたり狭すぎたりする場合は、これらの画像を並べて表示できるようにしたいと考えています。バックグラウンド CSS はそれを行うための明らかな方法ですが、非同期の画像読み込みとは互換性がありません、 私の知る限り。

私の質問:<img>タグを並べて表示するために使用できる jQuery (または CSS3) はありますか?

または、画像の非同期読み込みを行い、それを背景の css 属性に貼り付ける方法はありますか? 少し魔法のように聞こえますが、うまくいくかもしれません。

4

1 に答える 1

1

HTMLマークアップ構造を投稿できますか？それ以外の場合はブラインドで、含まれているdivのbackgroundプロパティを変更しようとしましたか？

// your callback function

function () {
    // set the image hidden by default    
    $(this).hide(); 

    // with the holding div #loader, apply:
    $this_img
      // remove the loading class (so no background spinner), 
      .removeClass('loading')
      // then insert our image
     //.prepend(this)

.css（'background'、'transparent url（ "'+ $ this_src +'"）左上の繰り返し'）;

    // fade our image in to create a nice effect
    $(this).fadeIn();
  }
于 2009-07-29T10:27:34.437 に答える