59

多くの人が知っているように、画像の遅延読み込みに広く使用されています。

これを遅延読み込みdivの背景画像として使用したいと思います。

どうやってやるの ？

現在、そのプラグインをhttp://www.appelsiini.net/projects/lazyloadで使用できます。

だから私はそれがdivの背景で動作するようにそれを変更する必要があります

助けが必要。ありがとうございました。

以下の部分では、遅延読み込みの画像を想定しています

$self.one("appear", function() {
    if (!this.loaded) {
        if (settings.appear) {
            var elements_left = elements.length;
            settings.appear.call(self, elements_left, settings);
        }
        $("<img />")
            .bind("load", function() {
                $self
                    .hide()
                    .attr("src", $self.data(settings.data_attribute))
                    [settings.effect](settings.effect_speed);
                self.loaded = true;

                /* Remove image from array so it is not looped next time. */
                var temp = $.grep(elements, function(element) {
                    return !element.loaded;
                });
                elements = $(temp);

                if (settings.load) {
                    var elements_left = elements.length;
                    settings.load.call(self, elements_left, settings);
                }
            })
            .attr("src", $self.data(settings.data_attribute));
    }
});

Jqueryプラグインの遅延読み込み

4

10 に答える 10

28

まず、いつ交換するかを考える必要があります。たとえば、読み込まれた div タグのたびに切り替えることができます。私の例では、追加のデータフィールド「背景」を使用しただけで、そのセットが設定されるたびに、画像が背景画像として適用されます。

次に、作成したイメージ タグを使用してデータをロードするだけです。また、img タグを上書きせず、代わりに css 背景画像を適用します。

コード変更の例を次に示します。

if (settings.appear) {
    var elements_left = elements.length;
    settings.appear.call(self, elements_left, settings);
}
var loadImgUri;
if($self.data("background"))
    loadImgUri = $self.data("background");
else
    loadImgUri  = $self.data(settings.data_attribute);

$("<img />")
    .bind("load", function() {
        $self
            .hide();
        if($self.data("background")){
            $self.css('backgroundImage', 'url('+$self.data("background")+')');
        }else
            $self.attr("src", $self.data(settings.data_attribute))

        $self[settings.effect](settings.effect_speed);

        self.loaded = true;

        /* Remove image from array so it is not looped next time. */
        var temp = $.grep(elements, function(element) {
            return !element.loaded;
        });
        elements = $(temp);

        if (settings.load) {
            var elements_left = elements.length;
            settings.load.call(self, elements_left, settings);
        }
    })
    .attr("src", loadImgUri );
}

積載量はそのまま

$("#divToLoad").lazyload();

この例では、次のように html コードを変更する必要があります。

<div data-background="http://apod.nasa.gov/apod/image/9712/orionfull_jcc_big.jpg" id="divToLoad" />​

ただし、スイッチを div タグに変更してから、「data-original」属性を操作することもできます。

フィドルの例を次に示します: http://jsfiddle.net/dtm3k/1/

于 2012-09-01T12:29:44.853 に答える
23

編集：以下の投稿は2012年のもので、今では廃止されています！

私はこのようにします：

<div class="lazyload" style="width: 1000px; height: 600px" data-src="%s">
    <img class="spinner" src="spinner.gif"/>
</div>

そしてロード

$(window).load(function(){

    $('.lazyload').each(function() {

        var lazy = $(this);
        var src = lazy.attr('data-src');

        $('<img>').attr('src', src).load(function(){
            lazy.find('img.spinner').remove();
            lazy.css('background-image', 'url("'+src+'")');
        });
    
    });

});
于 2012-12-01T02:17:32.007 に答える
8

プラグインの公式サイトでこれを見つけました：

<div class="lazy" data-original="img/bmw_m1_hood.jpg" style="background-image: url('img/grey.gif'); width: 765px; height: 574px;"></div>

$("div.lazy").lazyload({
      effect : "fadeIn"
});

ソース: http://www.appelsiini.net/projects/lazyload/enabled_background.html

于 2014-06-05T09:43:51.567 に答える
5

役立つかもしれない「遅延ロード」プラグインを作成しました。あなたの場合にそれを使って仕事を成し遂げるための可能な方法は次のとおりです：

$('img').lazyloadanything({
    'onLoad': function(e, LLobj) {
        var $img = LLobj.$element;
        var src = $img.attr('data-src');
        $img.css('background-image', 'url("'+src+'")');
    }
});

これは maosmurf の例のように単純ですが、要素が表示されたときにイベントを発生させる「遅延ロード」機能を提供します。

https://github.com/shrimpwagon/jquery-lazyloadanything

于 2013-03-05T20:50:41.110 に答える
0

画像の読み込みとは関係ないことはわかっていますが、ここでは就職の面接試験で行ったことを示します。

HTML

<div id="news-feed">Scroll to see News (Newest First)</div>

CSS

article {
   margin-top: 500px;
   opacity: 0;
   border: 2px solid #864488;
   padding: 5px 10px 10px 5px;
   background-image: -webkit-gradient(
   linear,
   left top,
   left bottom,
   color-stop(0, #DCD3E8),
   color-stop(1, #BCA3CC)
   );
   background-image: -o-linear-gradient(bottom, #DCD3E8 0%, #BCA3CC 100%);
   background-image: -moz-linear-gradient(bottom, #DCD3E8 0%, #BCA3CC 100%);
   background-image: -webkit-linear-gradient(bottom, #DCD3E8 0%, #BCA3CC 100%);
   background-image: -ms-linear-gradient(bottom, #DCD3E8 0%, #BCA3CC 100%);
   background-image: linear-gradient(to bottom, #DCD3E8 0%, #BCA3CC 100%);
   color: gray;
   font-family: arial;    
}

article h4 {
   font-family: "Times New Roman";
   margin: 5px 1px;
}

.main-news {
   border: 5px double gray;
   padding: 15px;
}

JavaScript

var newsData,
    SortData = '',
    i = 1;

$.getJSON("http://www.stellarbiotechnologies.com/media/press-releases/json", function(data) {

   newsData = data.news;

   function SortByDate(x,y) {
     return ((x.published == y.published) ? 0 : ((x.published < y.published) ? 1 : -1 ));
   }

   var sortedNewsData = newsData.sort(SortByDate);

   $.each( sortedNewsData, function( key, val ) {
     SortData += '<article id="article' + i + '"><h4>Published on: ' + val.published + '</h4><div  class="main-news">' + val.title + '</div></article>';
     i++;    
   });

   $('#news-feed').append(SortData);
});

$(window).scroll(function() {

   var $window = $(window),
       wH = $window.height(),
       wS = $window.scrollTop() + 1

   for (var j=0; j<$('article').length;j++) {
      var eT = $('#article' + j ).offset().top,
          eH = $('#article' + j ).outerHeight();

          if (wS > ((eT + eH) - (wH))) {
             $('#article' + j ).animate({'opacity': '1'}, 500);
          }
    }

});

データを日付で並べ替えてから、ウィンドウのスクロール機能で遅延読み込みを実行しています。

私はそれが役立つことを願っています:)

デモ

于 2015-01-09T05:07:58.443 に答える