Fatal编程技术网
  • javascript/
  • Javascript 使用模糊图像加载多个图像

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

javascript jquery css

Javascript 使用模糊图像加载多个图像,javascript,jquery,css,css-float,Javascript,Jquery,Css,Css Float,我有一个问题，这个插件，因为它只允许我显示一个图像，由于绝对定位的风格，例如，如果我想把两个图片一个接一个地使用一个型号12列的引导，它恰好是一个图像的位置高于其他 如何控制定位 我用这个引用的例子制作了一个脚本 HTML <body> <div class="col-md-6"> <div class="placeholder" data-large="https://unsplash.it/600/450?image=1010"&g

我有一个问题，这个插件，因为它只允许我显示一个图像，由于绝对定位的风格，例如，如果我想把两个图片一个接一个地使用一个型号12列的引导，它恰好是一个图像的位置高于其他

如何控制定位

我用这个引用的例子制作了一个脚本

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>
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);
}
引导程序的基本结构是：

<div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
</div>
有关引导网格系统的详细概述，请参阅或

您缺少HTML中的
。

首先。。。 我认为你没有花足够的精力让事情顺利进行

其次。。。 您的JavaScript仅通过使用
querySelector
而不是
querySelectorAll
来“处理”第一个占位符

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

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

仅供参考

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

下面是适用于我的代码：



window.onload=function（）{
var placeholder=document.querySelectorAll（'.placeholder'），
我
对于（i=0；i


占位符{
背景色：#f6f6f6；
背景尺寸：封面；
背景重复：无重复；
位置：相对位置；
溢出：隐藏；
}
.占位符img{
位置：绝对位置；
不透明度：0；
排名：0；
左：0；
宽度：100%；
过渡：不透明度1s线性；
}
.占位符img.loaded{
/*这是一个过度限定的选择器。对于现在的html。加载就足够了*/
不透明度：1；
}
.img小型{
过滤器：模糊（50px）；
}
.填充{
垫底：66.6%
}




更好。。。有关完整和最新的文档，请参阅getbootstrap.com。@alejokum我的回答对您有帮助吗？

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