如何实现div背景图片的懒加载

Question

如何实现div背景图片的懒加载

javascriptjqueryimagebackgroundlazy-loading

77

众所周知，它被广泛用于图片的懒加载。

现在我想将其用作懒加载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插件懒加载

- Furkan Gözükara

试试https://www.sitelint.com/blog/lazy-loading-css-background-images-for-better-website-loading-performance/ - Cezary Tomczyk

14个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris · Answer 1

这是一个AngularJS指令，可以做到这一点。希望能对某些人有所帮助。

用法：

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

- Vishal Kumar Sahu · Answer 2

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

当然，我使用并修改了一些堆栈回答。希望它能帮助到某人。

- Nghia Pham Tuan · Answer 3

如果你使用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>

- Bhaumik Mehta · Answer 4

我知道这与图像加载无关，但这是我在一次工作面试测试中所做的。

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

});

我正在按日期对数据进行排序，然后在窗口滚动函数中进行延迟加载。

希望可以帮到您 :)

Demo