Lazy div 배경 이미지를 로드하는 방법

Lazy div 배경 이미지를 로드하는 방법

많은 사람들이 알다시피 이미지를 게으르게 로드하는 데 널리 사용됩니다.

이제 이것을 게으른 load div 배경 이미지로 사용하고 싶습니다.

내가 어떻게 그럴 수 있을까?

저는 현재 그 플러그인을 http://www.appelsiini.net/projects/lazyload 에서 사용할 수 있습니다.

그래서 div background와 같이 작동하는 방향으로 수정해야 합니다.

도움이 필요합니다.감사해요.

아래 부분은 게으른 이미지를 로드한다고 생각합니다.

$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 플러그인 레이지 로드

먼저 교환하고 싶을 때는 생각을 해봐야 합니다.예를 들어 div 태그가 로드될 때마다 전환할 수 있습니다.예를 들어 저는 추가 데이터 필드 "배경"을 사용했으며, 설정할 때마다 이미지가 배경 이미지로 적용됩니다.

그러면 생성된 이미지 태그와 함께 Data를 로드하면 됩니다.그리고 img 태그를 덮어쓰지 말고 cs 배경 이미지를 적용하세요.

다음은 코드 변경의 예입니다.

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년의 것이고 지금쯤이면 구식입니다!

저는 이렇게 합니다.

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

});

작년 중순 2020년 웹.dev는 새로운 것과 이것을 할 수 있는 몇가지 새로운 방법을 공유하는 기사를 올렸습니다.IntersectionObserver작성 시 이 답변은 모든 주요 브라우저에서 지원됩니다.이렇게 하면 이미지가 뷰포트 가장자리로 이동한 후 로드될 때까지 기다리는 동안 매우 가벼운 무게의 배경 이미지 또는 배경색 자리 표시자를 사용할 수 있습니다.

CSS

.lazy-background {
  background-image: url("hero-placeholder.jpg"); /* Placeholder image */
}

.lazy-background.visible {
  background-image: url("hero.jpg"); /* The final image */
}

자바스크립트

document.addEventListener("DOMContentLoaded", function() {
  var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-background"));

  if ("IntersectionObserver" in window) {
    let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add("visible");
          lazyBackgroundObserver.unobserve(entry.target);
        }
      });
    });

    lazyBackgrounds.forEach(function(lazyBackground) {
      lazyBackgroundObserver.observe(lazyBackground);
    });
  }
});

플러그인의 공식 사이트에서 이 내용을 발견했습니다.

<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

도움이 될만한 "게으른 부하" 플러그인을 만들었습니다.사용자의 경우 작업을 완료할 수 있는 방법은 다음과 같습니다.

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

이 질문을 하는 것은 잠시였지만, 2020년에 다른 답변을 공유할 수 없다는 것을 의미하지는 않습니다.여기 jquery:jQuery Lazy와 함께하는 멋진 플러그인이 있습니다.

Lazy의 기본 사용법:

HTML

<!-- load background images of other element types -->
<div class="lazy" data-src="path/to/image.jpg"></div>
enter code here

JS

 $('.lazy').Lazy({
    // your configuration goes here
    scrollDirection: 'vertical',
    effect: 'fadeIn',
    visibleOnly: true,
    onError: function(element) {
        console.log('error loading ' + element.data('src'));
    }
});

배경 이미지는 로딩이 귀찮습니다.그게 다예요!

실제 예제와 더 자세한 내용을 보려면 이 lazy-doc 링크를 확인하십시오.

위에서 언급한 플러그인을 사용하여 이미지를 게으르게 로드하는 것은 스크롤 이벤트에 청취자를 부착하거나 setInterval을 사용하는 기존 방식을 사용하며 getBoundingClientRect()를 호출할 때마다 브라우저가 전체 페이지를 다시 배치하도록 강요하고 웹 사이트에 상당한 jank를 도입하기 때문에 성능이 매우 떨어집니다.

InteractionObserver를 사용하여 이미지를 지연 로드하는 Lozad.js(의존 관계 없이 569바이트만 사용)를 사용합니다.

jQuery 미포함

HTML

background-image: url ('default-loading-image')

data-src="image-you-load-to-load"

<div class="ajustedBackground"  style="background-image: url('default-loading-image');" data-src="image-you-want-to-load"><div>

var tablinks = document.getElementsByClassName("ajustedBackground");
    for (i = 0; i < tablinks.length; i++) {
      var lazy = tablinks[i];
      var src = lazy.dataset.src;

      lazy.style.backgroundImage =  'url("'+src+'")';
    }

.ajustedBackground{
  width: 100%;
  height: 300px;
  background-size: 100%;
  border-radius: 5px;
  background-size: cover;
  background-position: center;
  position: relative;
}

<div class="ajustedBackground"  style="background-image: url('https://monyo.az/resources/img/ezgif-6-b10ea37ef846.gif');" data-src="https://monyo.az/resources-qrcode/img/Fathir_7%201.png"><div>

모두 찾습니다.ajustedBackgroundclassname in html and load image fromdata-src

function lazyloadImages(){
    var tablinks = document.getElementsByClassName("ajustedBackground");
    for (i = 0; i < tablinks.length; i++) {
      var lazy = tablinks[i];
      var src = lazy.dataset.src;

      lazy.style.background =  'url("'+src+'")';
    }

}

반응이 좋은 웹사이트를 위해 이 문제를 해결해야 했습니다.저는 동일한 요소가 다른 화면 폭을 처리할 수 있는 다양한 배경을 가지고 있습니다.제 해결책은 매우 간단합니다. 모든 이미지의 범위를 "zoinked"와 같은 CSS 셀렉터로 유지합니다.

논리:

사용자가 스크롤하는 경우, 관련된 배경 이미지와 함께 스타일로 로드합니다.알았어!

여기 제가 도서관에서 쓴 "zoinked"라는 글이 있습니다. 이유를 모르겠습니다.그냥 일어난거죠?

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

사용자가 스크롤을 시작하는 순간 상단의 이미지 뒤에 있는 모든 이미지를 로드하는 것이 제 기술입니다.더 많은 제어를 원한다면 "줌킹"을 더 지능적으로 만들 수 있습니다.

<div class="lazy" data-bg="img/bmw_m1_hood.jpg" style="width: 765px; height: 574px;"></div>
    
var lazyLoadInstance = new LazyLoad({
  load_delay: 100,
  effect : "fadeIn"
});

바닐라 레이지 로드 사용하기 https://www.npmjs.com/package/vanilla-lazyload

jQuery를 사용하면 이미지의 존재를 확인할 수 있습니다.src를 원래 이미지 높이 너비의 평면 base64 해시 문자열에 추가한 다음 필요한 url로 대체했습니다.

$('[data-src]').each(function() {
  var $image_place_holder_element = $(this);
  var image_url = $(this).data('src');
  $("<div class='hidden-class' />").load(image_url, function(response, status, xhr) {
    if (!(status == "error")) {
      $image_place_holder_element.removeClass('image-placeholder');
      $image_place_holder_element.attr('src', image_url);
    }
  }).remove();
});

물론 저는 몇 가지 스택 답변을 사용하고 수정했습니다.누군가에게 도움이 되길 바랍니다.

이것은 각진 것입니다.JS Directive를 실행합니다.누군가에게 도움이 되길 바랍니다.

용도:

<div background-image="{{thumbnailUrl}}"></div>

코드:

import * as angular from "angular";

export class BackgroundImageDirective implements angular.IDirective {

    restrict = 'A';

    link(scope: angular.IScope, element: angular.IAugmentedJQuery, attrs: angular.IAttributes) {
     
        var backgroundImage = attrs["backgroundImage"];

        let observerOptions = {
            root: null,
            rootMargin: "0px",
            threshold: []
        };

        var intersectionCallback: IntersectionObserverCallback = (entries, self) => {

            entries.forEach((entry) => {
                let box = entry.target as HTMLElement;

                if (entry.isIntersecting && !box.style.backgroundImage) {
                    box.style.backgroundImage = `url(${backgroundImage})`;
                    self.disconnect();
                }
            });
        }

        var observer = new IntersectionObserver(intersectionCallback, observerOptions);
        observer.observe(element[0]);
    }

    static factory(): angular.IDirectiveFactory {
        return () => new BackgroundImageDirective();
    }
}

jQuery를 사용하는 경우 다음을 시도합니다.

<!DOCTYPE html>
<html>
<head>
    <title>Lazy Load Background Images</title>
    <style>
        .lazy-bg {
            width: 400px;
            height: 300px;
            background-color: #f0f0f0;
            background-size: cover;
            background-position: center;
        }
    </style>
</head>
<body>
    <div class="lazy-bg" data-bg-src="image1.jpg"></div>
    <div class="lazy-bg" data-bg-src="image2.jpg"></div>
    <div class="lazy-bg" data-bg-src="image3.jpg"></div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $(".lazy-bg").each(function () {
                var $element = $(this);
                var bgSrc = $element.data("bg-src");

                if (bgSrc) {
                    var img = new Image();
                    img.src = bgSrc;

                    $(img).on("load", function () {
                        $element.css("background-image", "url('" + bgSrc + "')");
                    });
                }
            });
        });
    </script>
</body>
</html>

이미지 부하와는 관계가 없는 것으로 알고 있지만, 여기서 제가 입사 면접 시험에서 한 것이 있습니다.

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

자바스크립트

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

});

나는 날짜별로 데이터를 분류한 후 window scroll 기능으로 loading을 하고 있습니다.

도움이 되었으면 좋겠습니다 :)

데모

언급URL : https://stackoverflow.com/questions/12014606/how-to-lazy-load-div-background-images