Lazy Loading HTML5 Section with Images

Question

I have a portfolio section on my single page site (site is divided into sections by HTML5 section Tag).

 <section id="portfolio" class="light-bg">

The portfolio section contains all images ( 16 MB).

<!-- Portfolio item -->
    <div class="item graphic-design">
      <a href="#folio-popup">
        <img src="img/portfolio/graphic-design/felicity/2.jpg" alt="Portfolio"/>
        <div class="details">
        <h4 class="title">Felicity</h4>
             <p class="des decription">
              6 day count down teaser for Felicity'14.
             </p>
        </div>
         <i class="icon-share-alt"></i>
           <div class="overlay"></div>
         </a>
    </div>
<!-- /Portfolio item -->

The site has a preloader which loads the site only after all content is downloaded causing a lot of waiting time.

Is there a lazy loading technique that can be applied on HTML5 sections which would cause the Portfolio section images to load only when the 'Portfolio' section is clicked? This would save on the preloading time.

The site is here and its files are here. The index.html ( which has all sections is here.

Any other advice on how load time could be optimized?

Your picture responsiveness don't change onresize if after it was loaded in smaller screen. — PVL
– PVL, Commented Mar 13, 2016 at 16:50
Your page takes 33 seconds to load and includes 13mb of images, 500kb of JS, 500kb or CSS, etc. You can test it here. You will need to do more than just lazyload images to achieve reasonable performance. — Yogi
– Yogi, Commented Mar 13, 2016 at 17:29
@Roberto: I'm planning to add server caching. That should help too. — Shubham
– Shubham, Commented Mar 13, 2016 at 17:48
I've tried your suggestion but that doesnt seem to improve the performance. Have I done anything wrong? The site is here: shubhamrathi.s3.amazonaws.com/index3.html — Shubham
– Shubham, Commented Mar 16, 2016 at 10:38

Michał Perłakowski · Accepted Answer · 2016-03-13 19:07:34Z

2

You can change the <img>s to something like:

<img data-src="img/portfolio/graphic-design/felicity/2.jpg" alt="Portfolio"/>

and change the data-src attribute to src with JavaScript when needed, for example when Portfolio section is clicked.

Example JavaScript code:

someElement.addEventListener("click", function() {
  Array.from(document.querySelectorAll("img[data-src]"))
    .forEach(element=> {
      element.src = element.getAttribute("data-src")
      element.removeAttribute("data-src")
    })
})

jQuery version:

$jQueryElement.click(function() {
  $("img[data-src]").attr("src", function() {
    return $(this).attr("data-src")
  }).removeAttr("data-src")
})

edited Mar 13, 2016 at 19:07

answered Mar 13, 2016 at 16:40

Michał Perłakowski

93.4k30 gold badges165 silver badges189 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Yogi Over a year ago

Up voted as this is a nicely coded answer. Yet, I think OP's web site has multiple problems to solve that aren't part of the question.

Shubham Over a year ago

$('#portfolio').addEventListener() ->VM794:2 Uncaught TypeError: $(...).addEventListener is not a function(…)

Michał Perłakowski Over a year ago

@Shubham Ahem... someElement should be native DOM element, not a jQuery element. If you're using jQuery, it should be just $someElement.click(function() { ... }).

Collectives™ on Stack Overflow

Lazy Loading HTML5 Section with Images

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related