Здраствуйте! Я верстальщик в фирме которая занимается разработкой лендингов. И от меня аналитики требует чтобы сайты грузились за одну-две секунды, что почти невозможно с такими дизайнами как у лендингов (длинный, многоблочный сайт, который изобилует картинками и эффектами). И я решил сделать отложенную подгрузку блоков.
Вот код:
Репозиторий выглядит так:
project
|--build
| |--js
| |--scripts.js
|--parts
| |--file1.inc.php
| |--file3.inc.php
| |--...
|--index.php
HTML:
первый блок
второй блок
третий блок
<div class="ajax-load" id="file1"></div>
<div class="ajax-load" id="file2"></div>
JS:
// ******************* Ajax page partials load *******************
var ajaxPath = '../../parts/';
var ajaxExtension = '.inc.php';
var ajaxId = $('.ajax-load').first().attr('id');
//Инициализация при прокрутке
$("#load-start").waypoint(function(direction){
if(direction !== 'up'){
$('.ajax-load').first().load(
ajaxPath + ajaxId + ajaxExtension,
function( response, status, xhr ) {
if ( status == "error" ) {
var msg = "Произошла ошибка, пожалуйста обновите страницу!";
$( "#" + $(this).attr(id) ).html("<h2 class='ajax__error'>" + msg + "</h2>");
}else{
nextId = $(this).next('.ajax-load').attr('id');
ajaxLoader(nextId);
}
}
);
}
}, { offset: 600 });
//Рекурсивная функция подгрузки блоков
function ajaxLoader(id){
$('#' + id).load(
ajaxPath + id + ajaxExtension,
function( response, status, xhr ) {
if ( status == "error" ) {
var msg = "Произошла ошибка, пожалуйста обновите страницу!";
$( $(this) ).html("<h2 class='ajax__error'>" + msg + "</h2>");
}else{
nextId = $(this).next('.ajax-load').attr('id');
ajaxLoader(nextId);
}
}
);
}
// ******************* Ajax page partials load *******************
Логика следующая:
Я написал на jquery рекурсивную функцию ajaxLoader которая вызывается при инициализации прокрутки(плагином waypoint). И он начинает вызывать саму себя пока блоки с классом ajax-load не закончатся. По крайней мере я хотел так сделать =), код сырой и его можно еще пилить и пилить, если есть ошибки то пожалуйста отпишитесь.
Преимущества в том, что для клиента сначала грузится только первые два-три блока, что влияет на скорость отображения сайта.
А теперь вопрос! Правильно ли таким образом подгружать файлы? Быват так что скорость интернета плохая и js не подгружается и получается сайт весь кривой получается.
Может кто-то знает другие способы, более надежные. Так как я джуниор, то думаю есть более опытные товарищи которые уже сталкивались с такими проблемами и решили их.
