如何在没有jQuery或延迟加载的情况下延迟背景图像

How to defer background images without jQuery or lazy loading

本文关键字：情况下 延迟 背景 图像 延迟加载 jQuery      更新时间：2023-09-26

基于Patrick Sexton教程，我想以与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>

如何使用背景?

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

需要更改的只是如何选择元素

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

以及我们如何设置值(这里不设置src属性，我们需要设置style属性)。

EDIT:我甚至会避免attribute检查(在JavaScript中)，因为我们的选择器会这样做。

标记(编辑代码: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

你可以做同样的事情，但是你可以在init函数中改变背景，而不是source 

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

我试图使用getElementsByClassName()，也最终得到backgroundDefer.getAttribute is not a function错误。所以我最终注入id属性，以及data-src属性用作图像URI的占位符，并使用上述代码延迟背景图像。

我还必须首先在背景URI图像中创建一个空字符串。

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

如果你想做的是在纯JS中设置页面加载后的背景，使用:

window.onload="myFunction()";

其中myFunction负责加载

相关文章：