我对这个插件有疑问 blurry-image-load ，因为它只允许我由于样式的绝对定位而显示图像，例如，如果我想使用模型 12 列 Bootstrap 将两张图片一张放在另一张旁边，则恰好一张图像位于另一张上方。
如何控制定位？
我用这个引用的例子制作了一个脚本 https://plnkr.co/edit/931AzFwG5DI52p34A3Nz?p=preview
HTML
<body>
<div class="col-md-6">
<div class="placeholder" data-large="https://unsplash.it/600/450?image=1010">
<img src="https://unsplash.it/20/15?image=1010" class="img-small">
<div style="padding-bottom: 66.6%;"></div>
</div>
</div>
<div class="col-md-6">
<div class="placeholder" data-large="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg">
<img src="https://cdn-images-1.medium.com/freeze/max/27/1*sg-uLNm73whmdOgKlrQdZA.jpeg?q=20" class="img-small">
<div style="padding-bottom: 66.6%;"></div>
</div>
</div>
</body>
CSS
.placeholder {
background-color: #f6f6f6;
background-size: cover;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
}
.placeholder img {
position: absolute;
opacity: 0;
top: 0;
left: 0;
width: 100%;
transition: opacity 1s linear;
}
.placeholder img.loaded {
opacity: 1;
}
.img-small {
filter: blur(50px);
}
Javascript
window.onload = function() {
var placeholder = document.querySelector('.placeholder'),
small = placeholder.querySelector('.img-small')
// 1: load small image and show it
var img = new Image();
img.src = small.src;
img.onload = function () {
small.classList.add('loaded');
};
// 2: load large image
var imgLarge = new Image();
imgLarge.src = placeholder.dataset.large;
imgLarge.onload = function () {
imgLarge.classList.add('loaded');
};
placeholder.appendChild(imgLarge);
}
最佳答案
首先... 我认为您没有付出足够的努力来让事情顺利进行。
其次...
您的 JavaScript 仅使用 querySelector 而不是 querySelectorAll 来“处理”first 占位符，所有这些都记录在 W3 Schools .
最后... 如果您正在使用 Bootstrap ，请使用 Bootstrap 中记录的元素。 .
.col-*-* 是 .row 的子级，而 .row 又是 .container 或 .container 的子级-流体
仅供引用...
css 样式不应再包含在 html 文件中，而是使用类。
下面是对我有用的代码:
window.onload = function() {
var placeholders = document.querySelectorAll('.placeholder'),
i;
for (i = 0; i < placeholders.length; i++) {
blurryLoad(placeholders[i]);
}
}
function blurryLoad(element) {
var small = element.querySelector('.img-small');
// 1: load small image and show it
var img = new Image();
img.src = small.src;
img.onload = function() {
small.classList.add('loaded');
};
// 2: load large image
var imgLarge = new Image();
imgLarge.src = element.dataset.large;
imgLarge.onload = function() {
imgLarge.classList.add('loaded');
};
element.appendChild(imgLarge);
}.placeholder {
background-color: #f6f6f6;
background-size: cover;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
}
.placeholder img {
position: absolute;
opacity: 0;
top: 0;
left: 0;
width: 100%;
transition: opacity 1s linear;
}
.placeholder img.loaded {
/*This is a overqualified selector. For the html as is now .loaded is enough*/
opacity: 1;
}
.img-small {
filter: blur(50px);
}
.padding {
padding-bottom: 66.6%
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />
<!-- Container -->
<div class="container">
<!-- Row -->
<div class="row">
<!-- Cols -->
<div class="col-md-6">
<div class="placeholder" data-large="https://unsplash.it/600/450?image=1010">
<img src="https://unsplash.it/20/15?image=1010" class="img-small">
<div class="padding"></div>
</div>
</div>
<div class="col-md-6">
<div class="placeholder" data-large="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg">
<img src="https://cdn-images-1.medium.com/freeze/max/27/1*sg-uLNm73whmdOgKlrQdZA.jpeg?q=20" class="img-small loaded">
<div class="padding"></div>
</div>
</div>
</div>
</div>关于javascript - 对多个图像使用模糊图像加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35901808/