在单击时将图像加载到引导轮播中

load images into bootstrap carousel onClick

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


我正在一个包含大量图像的 html 网站上工作，为了减少加载时间，当用户使用 javascript 单击封面图像时，我将加载隐藏的图像，然后将其插入引导轮播中。

我试图成功，但没有成功。图像未加载。有什么帮助吗？
这是我的最后一个代码：

.HTML 

<li>
  <a href="#" onclick="imgFilter('.ar-img')">
    <img src="images/AR/01.jpg" alt="">
  </a>
  <div class="accordion carousel-inner">
    <div class="item active">
      <img src="images/AR/01.jpg" alt="slide">
    </div>
    <div class="item">
      <img class="ar-img" src="" data-src="images/AR/02.jpg" alt="slide">
    </div>
    <div class="item">
      <img class="ar-img" src="" data-src="images/AR/03.jpg" alt="slide">
    </div>
  </div>
</li>
<li>
  <a href="#" onclick="imgFilter('.br-img')">
    <img src="images/BR/01.jpg" alt="">
  </a>
  <div class="accordion carousel-inner">
    <div class="item active">
      <img src="images/BR/01.jpg" alt="slide">
    </div>
    <div class="item">
      <img class="br-img" src="" data-src="images/BR/02.jpg" alt="slide">
    </div>
    <div class="item">
      <img class="br-img" src="" data-src="images/BR/03.jpg" alt="slide">
    </div>
  </div>
</li>

.JS

function imgFilter(id) {
    var imgId = $(id);
    $("imgId").each(function(i) {
        $("this").setAttribute('src', $("this").getAttribute('data-src'));
    });
};
行

中的内容：

$(".item img").each(function(i) {
    $("this").setAttribute('src', $("this").getAttribute('data-src'));
}

但是我会使用 jQuery 插件 lazyload 代替 (http://www.appelsiini.net/projects/lazyload(。

假设你有这样的 css：

.item{
  width:200px;
  height:auto;
}
.item img{
  width:100%;
  height:auto;
}
相关文章：