[英]How to defer background images without jQuery or lazy loading
基于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
属性)。
编辑 :由于我们的选择器会执行此操作,因此我什至会避免在JavaScript中进行attribute
检查。
标记(在此处编辑代码: 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>
编辑: 按班级名称进行选择
您可以执行相同的想法,但是可以在init函数中更改背景而不是源代码
<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>
如果您只想在纯JS页面加载后设置背景,请使用:
window.onload="myFunction()";
myFunction
在哪里加载。
我尝试使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.