对多个图像使用模糊图像加载

use blurry-image-load with several images

本文关键字：图像 模糊 加载      更新时间：2023-09-26

我对这个插件模糊图像加载有问题，因为它只允许我显示图像，因为样式的绝对定位，例如，如果我想使用模型将两张图片一张放在另一张旁边 12 列引导程序碰巧图像位于另一个图像之上。

如何控制定位？

我用这个引用的例子制作了一个脚本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);
}

爪哇语

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 来"处理"第一个占位符，这都在 W3 学校中记录。

最后。。。如果您正在使用引导程序，请使用引导程序中记录的元素。

.col-*-*是.row的孩子，而又是.container或.container-fluid的孩子

仅供参考...

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>

Bootstrap 的基本结构是：

<div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
</div>

请参阅 W3Schools 或 Bootstrap 本身，了解 Bootstrap 网格系统的详细概述。

您缺少 HTML 中的<div class="row">。

相关文章：