load images into bootstrap carousel onClick

Question

I'm working on an html site with a lot of images, to reduce loading time I'm going to load hidden images when user click on the cover image with javascript, then insert it into bootstrap carousel.

I tried to make it, but unsuccessful. Images aren't load. Any help?
Here is my last code:

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

Do not use one same id on different elements on the same page. it is forbidden!!! instead use class. — Farzad Yousefzadeh, Oct 16 '15 at 11:59

Margus · Answer 1 · 2015-10-16T14:10:04.310

0

Something in the lines of:

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

however i would use jQuery plugin lazyload instead (http://www.appelsiini.net/projects/lazyload).

Assumed you have css like:

.item{
  width:200px;
  height:auto;
}
.item img{
  width:100%;
  height:auto;
}

edited Oct 16 '15 at 14:10

answered Oct 16 '15 at 12:02

Margus

19,694
14
55
103

still doesn't work, I got n.fn.init[1], updated the JS code, lazyload needs the img height & width, for some reason I can't set the img height & width – y45 Oct 16 '15 at 13:00

load images into bootstrap carousel onClick

1 Answers1