Lazy Загрузка раздела HTML5 с изображениями

Question

У меня есть раздел портфолио на моем сайте с одной страницей (сайт разделен на разделы тегами HTML5).

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

Раздел портфолио содержит все изображения (16 МБ).

<!-- 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 --> 

На сайте есть прелоадер, который загружает сайт только после того, как все содержимое загружается в результате чего много времени ожидания.

Существует ли ленивая методика загрузки, которая может быть применена к разделам HTML5, что приведет к загрузке изображений раздела Портфолио только при нажатии на раздел «Портфолио»? Это сэкономит время предварительной загрузки.

Сайт here и его файлы here. Index.html (который имеет все секции является here

Любые другие советы о том, как время загрузки может быть оптимизирована

Answer 1

Вы можете изменить <img> сек на что-то вроде:.?

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

и изменения атрибут data-src: src с JavaScript при необходимости, например, при нажатии на кнопку Портфолио.

Пример кода JavaScript:

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

JQuery версия:

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