Пост-загрузка фото. Рекомендации от вас

[sarkis]

Доброго времени. На сайте 15 записей с картинками . Возникла идея подгружать их отдельно, после загрузки основной информации на странице.

Погуглив, вижу, что везде рекомендуют данный способ

<div>
    <img src="comicbookguy.jpg" style='opacity:0;' alt="" onload="imgLoaded(this)"/>
</div>

function imgLoaded(img){
    var $img = $(img);
    $img.parent().css('opacity',1);
};

т.е, как я понял : как только фото загрузилось оно становится видимым, т.к изначально оно невидимо!

Но, у меня возникла еще идея, которую я реализовал. К примеру :

$(window).on('load', function () {
  тут через аякс я загружаю фото
});

как только загрузилась страница, я начинаю загрузку фотографий через аякс .

Т.е два разных метода (разной направленности), а хочется знать, что лучше сделать ?
Цель: ускорить загрузку основного содержимого

lazyLoad - не подходит, т.к записи все вмещаются в окно и сколлить не надо.
Спасибо!

 

[t0wer]

У fancybox есть такая функция, постзагрузка.

<script type="text/javascript">
jQuery(document).on('ready post-load', easy_fancybox_handler );
</script>

 

[warg]

как вариант, можно изначально ставить фэйковое изображение, типа placeholder, а по загрузке страницы подменять
его на реальное изменяя атрибут. браузер в этом случае сам начнет асинхронно догружать изображения, и не надо возиться с аяксом.

<img src="fake.png" data-src="real-image1.png">
<img src="fake.png" data-src="real-image2.png">

<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

полное описание метода Для просмотра ссылки Войди или Зарегистрируйся