How to Lazy Load div background images

Question

As many of you know it is widely used to lazy load images   Now i want to use this as lazy load div background images   How can i do that    I am currently able to use http   www appelsiini net projects lazyload that plugin  So i need to modify it in a way that it will work with div backgrounds  Need help  Thank you   The below part i suppose lazy loads images   self one  appear   function         if   this loaded            if  settings appear                var elements left   elements length              settings appear call self  elements left  settings                         lt img   gt                 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

User · Answer

Using jQuery I could load image with the check on it's existence. Added src to a plane base64 hash string with original image height width and then replaced it with the required 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();
});

Of course I used and modified few stack answers. Hope it helps someone.

User · Answer

I had to deal with this for my responsive website  I have many different backgrounds for the same elements to deal with different screen widths  My solution is very simple  keep all your images scoped to a css selector  like  zoinked    The logic   If user scrolls  then load in styles with background images associated with them  Done   Here s what I wrote in a library I call  zoinked  I dunno why  It just happened ok    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    gt  2          this hasScrolled   true        window removeEventListener  scroll   this         this load                    Z prototype load   function           document body  addClass  zoinked              window Zoink   Z      window  document     For the CSS I ll have all my styles like this    zoinked  graphic  background-image  url large jpg      media max-width  480px    zoinked  graphic  background-image  url small jpg       My technique with this is to load all the images after the top ones as soon as the user starts to scroll  If you wanted more control you could make the  zoinking  more intelligent

User · Answer

First you need to think off when you want to swap  For example you could switch everytime when its a div tag thats loaded  In my example i just used a extra data field  background  and whenever its set the image is applied as a background image   Then you just have to load the Data with the created image tag  And not overwrite the img tag instead apply a css background image   Here is a example of the code change    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        lt img   gt         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        the loading stays the same       divToLoad   lazyload      and in this example you need to modify the html code like this    lt div data-background  http   apod nasa gov apod image 9712 orionfull jcc big jpg  id  divToLoad    gt     but it would also work if you change the switch to div tags and then you you could work with the  data-original  attribute   Here s an fiddle example  http   jsfiddle net dtm3k 1

User · Answer

It s been a moment that this question is asked  but this doesn t mean that we can t share other answers in 2020  Here is an awesome plugin with jquery jQuery Lazy  The basic usage of Lazy   HTML   lt  -- load background images of other element types -- gt   lt div class  lazy  data-src  path to image jpg  gt  lt  div gt  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                 and your background images are lazy loading  That s all   To see real examples and more details check this link lazy-doc

User · Answer

I know it s not related to the image load but here what I did in one of the job interview test   HTML   lt div id  news-feed  gt Scroll to see News  Newest First  lt  div gt    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  lt  y published    1   -1              var sortedNewsData   newsData sort SortByDate         each  sortedNewsData  function  key  val          SortData      lt article id  article    i      gt  lt h4 gt Published on      val published     lt  h4 gt  lt div  class  main-news  gt     val title     lt  div gt  lt  article gt         i                       news-feed   append SortData          window  scroll function         var  window     window          wH    window height           wS    window scrollTop     1     for  var j 0  j lt    article   length j            var eT       article    j   offset   top            eH       article    j   outerHeight               if  wS  gt    eT   eH  -  wH                       article    j   animate   opacity    1    500                            I am sorting the data by Date and then doing lazy load on window scroll function   I hope it helps     Demo

User · Answer

I ve created a  lazy load  plugin which might help  Here is the a possible way to get the job done with it in your case      img   lazyloadanything        onLoad   function e  LLobj            var  img   LLobj  element          var src    img attr  data-src             img css  background-image    url    src                    It is simple like maosmurf s example but still gives you the  lazy load  functionality of event firing when the element comes into view   https   github com shrimpwagon jquery-lazyloadanything

User · Answer

I ve found this on the plugin s official site    lt div class  lazy  data-original  img bmw m1 hood jpg  style  background-image  url  img grey gif    width  765px  height  574px   gt  lt  div gt      div lazy   lazyload         effect    fadeIn        Source  http   www appelsiini net projects lazyload enabled background html

User · Answer

I do it like this    lt div class  lazyload  style  width  1000px  height  600px  data-src   s  gt       lt img class  spinner  src  spinner gif   gt   lt  div gt    and load with    window  load function             lazyload   each function              var lazy     this           var src   lazy attr  data-src                 lt img gt    attr  src   src  load function                lazy find  img spinner   remove                lazy css  background-image    url    src

User · Answer

Lazy loading images using above mentioned plugins uses conventional way of attaching listener to scroll events or by making use of setInterval and is highly non-performant as each call to getBoundingClientRect   forces the browser to re-layout the entire page and will introduce considerable jank to your website     Use Lozad js  just 569 bytes with no dependencies   which uses InteractionObserver to lazy load images performantly

[javascript] How to Lazy Load div background images

Examples related to javascript

Examples related to jquery

Examples related to image

Examples related to background

Examples related to lazy-loading