Отключить загрузку изображений во время загрузки страницы

Question

Большинство посетителей сайта используют ограниченную полосу пропускания & slow internet. , поэтому я пытаюсь уменьшить время загрузки и сохранить их пропускную способность, отключив загрузку изображений & фоновых изображений во время загрузки веб-страницы, а затем дайте возможность загружать изображения веб-страницы при нажатии кнопки «показать изображения».

Я думаю о чем-то вроде ленивой загрузки, но с действием по клику.

Я ценю ваши предложения.

Answer 1

Одна идея:

-Храните пустой ЦСИ атрибуты для изображений

-Store IMG URLs по атрибуту (можно назвать его данных ЦСИ)

-Использование Jquery заменить SRC с данными -src, когда страница загружается или когда Пользователь нажимает «показать изображения»

Answer 2

Вложенные функции выглядят немного yucky, но вот решение jQuery для вашей проблемы, используя метод, упомянутый выше.

$(document).ready(function(){ // wait until the document is loaded 
 
    $('#loadimages').click(function(){ // before registering the event handler \t 
 
    $('img[data-src]').each(function(){ // and for each image with a data-src attribute  \t 
 
     $(this).attr('src', $(this).data('src')) // copy it's contents into the src attribute 
 
    }) 
 
    }) 
 
})

img[data-src]{ 
 
    width: 200px; 
 
    height: 400px; 
 
    background: grey; 
 
    position: relative; 
 
} 
 

 
img[data-src][src=""]::after { 
 
    content: 'Placeholder'; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, 50%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<img src="" data-src="http://lorempixel.com/200/400"/> 
 
<img src="" data-src="http://lorempixel.com/200/400"/> 
 
<img src="" data-src="http://lorempixel.com/200/400"/> 
 
<button id="loadimages">Load Images</button>

Answer 3

Я думаю, что есть 2 различных сценариев:

IMG-TAGS

HTML:

<img src="" data-load="http://imagesource" alt=""> 

JQuery:

$('img[data-load]').each(function(){   
    $(this).attr('src', $(this).data('load')); 
}); 

СПРАВОЧНАЯ-ИЗОБРАЖЕНИЙ

HTML:

<div class="background-placeholder"></div> 

CSS:

.background-placeholder { 
    background-color:#fff; 
    width:250px; 
    height:250px; 
} 

.show-bg1 { 
    background-image:url('http://imagesource'); 
} 

JQuery:

$('.background-placeholder').addClass('show-bg1'); 

CSS фон-изображения не загружены когда класс не используется (То же, на парения и т.д.) Это не самый эффективный способ сделать это, но это может дать вам представление о том, как его сделать , Возможно, вы могли бы хранить css-классы с правильными фоновыми изображениями также в атрибутах данных и прокручивать их.

FIDDLE