Question

我对此插件blurry-image-load有一个问题，因为它只允许我显示由于样式的绝对定位而导致的图像，例如，如果我想使用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);
}

的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);
}

Answer 1

Bootstrap的基本结构是：

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

有关Bootstrap网格系统的详细概述，请参阅W3Schools或Bootstrap itself。

您错过了HTML中的<div class="row">。

Answer 2

首先...... 我不认为你在努力让事情发挥作用上付出足够的努力。

...其次您的JavaScript仅使用querySelector而不是querySelectorAll来“处理”第一个占位符，而.col-*-*则记录在W3 Schools。

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

.row是.container的孩子，后者又是.container-fluid或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); }的孩子

... FYI

css样式不应再包含在html文件中，而是使用类。

在适用于我的代码下面：

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

.find()

使用模糊图像加载几个图像

2 个答案: