Подтвердить что ты не робот

Как Lazy Load div фоновых изображений

Как многие из вас знают, что он широко используется для ленивых изображений загрузки.

Теперь я хочу использовать это как ленивые фоновые изображения 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 plugin lazy load

4b9b3361

Ответ 1

Сначала вам нужно подумать, когда захотите поменяться местами. Например, вы можете переключаться каждый раз, когда загружается тег div. В моем примере я просто использовал дополнительное поле данных "background", и всякий раз, когда он был установлен, изображение применяется в качестве фонового изображения.

Затем вам просто нужно загрузить данные с созданным тегом изображения. И не переписывайте 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, а затем вы сможете работать с атрибутом "исходный исходный текст".

Вот пример скрипки: http://jsfiddle.net/dtm3k/1/

Ответ 2

Я делаю это так:

<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+'")');
        });

    });

});

Ответ 3

Я нашел это на официальном сайте плагина:

<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

Ответ 4

Я создал плагин "ленивой загрузки", который может помочь. Вот возможный способ выполнить работу с этим в вашем случае:

$('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

Ответ 5

Я знаю, что это не связано с загрузкой изображения, но вот что я сделал в одном из тестов собеседования.

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);
          }
    }

});

Я сортирую данные по дате, а затем выполняю ленивую нагрузку на функцию прокрутки окна.

Надеюсь, это поможет:)

Демо

Ответ 6

Мне пришлось иметь дело с этим для моего отзывчивого веб-сайта. У меня есть много разных фонов для тех же элементов, чтобы иметь дело с разной шириной экрана. Мое решение очень простое, сохраните все ваши изображения в селекторе css, например "сгруппированы".

Логика:

Если пользователь прокручивает, то загружает в стили связанные с ними фоновые изображения. Готово!

Вот что я написал в библиотеке, которую я называю "сгруппированным", я не знаю почему. Это просто нормально?

(function(window, document, undefined) {   var Z = function() {
    this.hasScrolled = false;

    if (window.addEventListener) {
      window.addEventListener("scroll", this, false);
    } else {
      this.load();
    }   };
     Z.prototype.handleEvent = function(e) {
    if ($(window).scrollTop() > 2) {
      this.hasScrolled = true;
      window.removeEventListener("scroll", this);
      this.load();
    }   };
     Z.prototype.load = function() {
    $(document.body).addClass("zoinked");   };
     window.Zoink = Z; 
})(window, document);

Для CSS у меня будут все мои стили:

.zoinked #graphic {background-image: url(large.jpg);}

@media(max-width: 480px) {.zoinked #graphic {background-image: url(small.jpg);}}

Моя техника с этим - загрузить все изображения после верхних, как только пользователь начнет прокручивать. Если вы хотите большего контроля, вы можете сделать "зонирование" более интеллектуальным.

Ответ 7

Ленивая загрузка изображений с использованием вышеупомянутых плагинов использует традиционный способ подключения слушателя к прокрутке событий или с использованием setInterval и очень невыполнима, поскольку каждый вызов getBoundingClientRect() заставляет браузер переформатировать всю страницу и введет на ваш сайт значительный запас.

Используйте Lozad.js (всего 569 байт без зависимостей), который использует InteractionObserver, чтобы выполнять ленивые загрузки изображений.