avoid loading the images for the first time

I have a html page with 12 images and 12 different modal pop ups opening with each click respectively and different images in each. The problem is when I load the html page all the images in the 12 pop ups are loaded for the first time which makes the site slow. Each pop contains a carousel.

I tried lazy load but it does not work for the images inside the modal. I also tried appending the images through jquery.append put the images in the carousel work only for single pop up, though I have passed it with different id.

Following is my html code with jquery for single pop .

Here is the single image

<div id="profile-item-bfc" class="our-work-img-thumb col-lg-2" > 
        <div class="profile-item-detail" > <img src="../img/portfolio/thumb/bfc.png" alt="Big Funny Cards" >
          <h5 > Big Funny Cards </h5>
        </div> 
      </div>

Here is the pop up on click without jquery append

 <div id="profile-div-bfc" class="modal" role="dialog">
    <div class="modal-dialog apps-detail">
      <div class="modal-content">
        <div class="modal-body">
          <div class="row">
            <div class="col-lg-4" >
              <div id="myCarousel_bfc" class="carousel slide apps-detail-carousel" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                  <li data-target="#myCarousel_bfc" data-slide-to="0" class="active"></li>
                  <li data-target="#myCarousel_bfc" data-slide-to="1"></li>
                  <li data-target="#myCarousel_bfc" data-slide-to="2"></li>
                   <li data-target="#myCarousel_bfc" data-slide-to="3"></li>
                    <li data-target="#myCarousel_bfc" data-slide-to="4"></li>
                </ol>
                <!-- Wrapper for slides -->
                <div id="bfc-inner"  class="carousel-inner" role="listbox">
                  <div class="item active"> <img src="../img/portfolio/full/bfc/bfc_screen1.jpg"  > </div>
                  <div class="item"> <img src="../img/portfolio/full/bfc/bfc_screen2.jpg" > </div>
                 <div class="item"> <img src="../img/portfolio/full/bfc/bfc_screen3.jpg" > </div>


                </div>
                <!-- Left and right controls -->
                <a class="left carousel-control" href="#myCarousel_bfc" role="button" data-slide="prev"> <span class="icon-prev" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel_bfc" role="button" data-slide="next"> <span  class="icon-next" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
            </div>

        </div>
      </div>
    </div>
  </div>

Here is the pop up with jquery append

 <div id="profile-div-bfc" class="modal" role="dialog">
    <div class="modal-dialog apps-detail">
      <div class="modal-content">
        <div class="modal-body">
          <div class="row">
            <div class="col-lg-4" >
              <div id="myCarousel_bfc" class="carousel slide apps-detail-carousel" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                  <li data-target="#myCarousel_bfc" data-slide-to="0" class="active"></li>
                  <li data-target="#myCarousel_bfc" data-slide-to="1"></li>
                  <li data-target="#myCarousel_bfc" data-slide-to="2"></li>
                   <li data-target="#myCarousel_bfc" data-slide-to="3"></li>
                    <li data-target="#myCarousel_bfc" data-slide-to="4"></li>
                </ol>
                <!-- Wrapper for slides -->
                <div id="bfc-inner"  class="carousel-inner" role="listbox">

                </div>
                <!-- Left and right controls -->
                <a class="left carousel-control" href="#myCarousel_bfc" role="button" data-slide="prev"> <span class="icon-prev" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel_bfc" role="button" data-slide="next"> <span  class="icon-next" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
            </div>

        </div>
      </div>
    </div>
  </div>

Jquery code

$('#profile-item-bfc').on('click',function(){
                $('#bfc-inner').append('<div class="item active"> <img src="../img/portfolio/full/bfc/bfc_screen1.jpg"> </div>');
                $('#bfc-inner').append('<div class="item"> <img src="../img/portfolio/full/bfc/bfc_screen2.jpg"> </div>' );
                $('#bfc-inner').append('<div class="item"> <img src="../img/portfolio/full/bfc/bfc_screen3.jpg"> </div>' );


            $("#profile-div-bfc").modal("show");
            $('body').addClass('body-scroll');
    })

Any kind of help would be appreciated.

jquery html css
kishan patel

Answers 1

Submit Answer
  • Rakesh

    As mentioned in the GibboK article the best approach is to use data-original-src attribute and have the real image stored there . The real src could be empty or leading to a loading.gif anim . Then upon showing the modal simply swap the fake src with the original.

    Here's a demo

    The modal img tag

        <img src="loader2.gif"
         data-original-src="http://placekitten.com/200/300"
         alt="">

    The javascript to swap the src

      $('.modal').on('shown.bs.modal', function () {
     src = $(this).find('img').attr('data-original-src');
     $(this).find('img').attr('src', src);
   });

Related Articles