CODEWITHSUNDEEP
javascript
NineCattoRules
NineCattoRules

Reputation: 2428

How to defer background images without jQuery or lazy loading

Based on Patrick Sexton tutorial, I would like to defer background images in the same way I do here with img:

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="your-image-here">

<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

How can I do the same using backgrounds? 

<div style="background:url(your-image-here)"></div>

Upvotes: 5

Views: 10367

Answers (4)

lily lee
lily lee

Reputation: 1

I tried to use getElementsByClassName() and also ended up getting the backgroundDefer.getAttribute is not a function error. So I ended up inject id attribute, as well as the data-src attribute to be used as a placeholder for image URI and used the above code to defer background image.

I also have to first of all make an empty string in the background URI image. 

<div id="my-div" class="parallax-background" data-stellar-background-ratio="0.7" data-src="https://d5y2y5rl4e57i.cloudfront.net/GWL_atl-108.jpg" style="background-image:url('')"></div>

<script>

function init() {
  var backgroundDefer = document.getElementById('my-div');

  //have to use document.getElementById in order to use getAttribute() function

  if(backgroundDefer.getAttribute('data-src')) {
        backgroundDefer.style="background-image:url("+backgroundDefer.getAttribute('data-src')+")";
  }
}
window.onload = init;

</script>

Upvotes: -1

jl_
jl_

Reputation: 5539

Changes needed are only how we select the element

document.querySelectorAll('div[data-src]');

and how we set the value (here instead of setting the src attribute, we need to set the style attribute).

EDIT: I would even avoid the attribute check (in the JavaScript) here since our selector would do it.

Mark-up (Edit code here: http://codepen.io/anon/pen/rryxoK) 

function init() {
  var imgDefer = document.querySelectorAll('div[data-src]');
  var style = "background-image: url({url})";
  for (var i = 0; i < imgDefer.length; i++) {

    imgDefer[i].setAttribute('style', style.replace("{url}", imgDefer[i].getAttribute('data-src')));

  }
}

window.onload = init;
.deferImage {
  width: 800px;
  height: 600px;
}
<div class="deferImage" data-src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Domestic-crested-duck-CamdenME.jpg/800px-Domestic-crested-duck-CamdenME.jpg"></div>

EDIT: To select by class name

Upvotes: 5

przemo_li
przemo_li

Reputation: 4053

If all You want to do is set background after page load in pure JS use:

window.onload="myFunction()";

Where myFunction do the loading.

Upvotes: -3

artem-litch
artem-litch

Reputation: 11

You can just do the same idea but instead of source you change the background in the init function

<div id='my-div' style="" data-src="your-image-here"></div>

<script>
function init() {
var backgroundDefer = document.getElementById('my-div');
    if(backgroundDefer.getAttribute('data-src')) {
        backgroundDefer.style.background="url("+backgroundDefer.getAttribute('data-src')+")";
    }
}
window.onload = init;
</script>

Upvotes: 1

Related Questions