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

Так что я использую ленивую загрузку на веб-сайте, и она отлично работает в каждом браузере, который я тестировал до сих пор. Но на мобильных устройствах изображения занимают больше времени для загрузки и, следовательно, остаются «невидимыми» слишком долго. Мне интересно, что лучший способ отключить ленивую загрузку, когда страница посещает мобильное устройство?Отключить ленивую нагрузку для мобильных устройств

Причина это не так просто, как просто положить линию if (typeof window.orientation !== 'undefined') return; перед вызовом .lazyload из-за изменения, внесенные в новых браузерах Ленивого Load требует измененного HTML, в котором пустые месте держатели используются в качестве src и фактических изображений помещенный в атрибут data-original. В результате, когда Lazy Load отключен, пользователь просто видит заполнители, а не фактические изображения.

Вот соответствующий код с сайта в данный момент:

<head> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> 
<script type="text/javascript" src="js/jquery.lazyload.min.js"></script> 
<script type="text/javascript"> 
var $j = jQuery.noConflict(); 
$j(function() { 
if (typeof window.orientation !== 'undefined') return; 
$j("img").lazyload({ 
    placeholder : "images/white.gif", 
    effect: "fadeIn", 
}); 
}); 
</script> 

<style type="text/css"> 
#content { 
font-family: "zierinitialen2regular", "Palatino Linotype", "Book Antiqua", Palatino, serif; 
font-size: 100%; 
position: absolute; 
height: 574px; 
margin: -277px 0px 0px 0px; 
padding: 0px 200px 0px 240px; 
top: 50%; 
overflow-x: hidden; 
white-space: nowrap; 
} 

.lazyload { 
display: none; 
height: 550px; 
max-width: 1200px; 
min-width: 300px; 
} 
</style 
</head> 

<body> 
<div id="content"> 
    <img class="lazyload" src="white.jpg" data-original="photo01.jpg" alt="photo01"/> 
    <noscript><img src="photo01.jpg"></noscript> 
    <img class="lazyload" src="white.jpg" data-original="photo02.jpg" alt="photo02"/> 
    <noscript><img src="photo02.jpg"></noscript> 
    <img class="lazyload" src="white.jpg" data-original="photo03.jpg" alt="photo03"/> 
    <noscript><img src="photo03.jpg"></noscript> 
    <img class="lazyload" src="white.jpg" data-original="photo04.jpg" alt="photo04"/> 
    <noscript><img src="photo04.jpg"></noscript> 

</div> 
</body>

Есть ли возможно способ настроить его так, Javascript выключен полностью, если сайт посещается мобильным устройством, так что он будет использовать код в тегах <noscript>? Будем очень благодарны за любые идеи по работе над этим вопросом. БЛАГОДАРЯ!

источник

2013-02-23 MonkeyTyping

Вы можете использовать appEngines для определения типа браузера, а затем не запускать функцию, если это мобильное устройство.

Э.Г.

isMobDevice = (/iphone|ipad|Android|webOS|iPod|BlackBerry|Windows Phone|ZuneWP7/gi).test(navigator.appVersion); 

if(!isMobDevice){ 
    $("img").lazyload({ 
     placeholder : "images/white.gif", 
     effect: "fadeIn", 
    }); 
}else{ 
    $('img').each(function(){ 
     $(this).attr('src',$(this).data('original')); 
    }); 
}

источник

2013-02-23 19:02:55 dev

Но если функция не работает, то посетитель будет видеть только пустые заполнители, так как 'src' атрибута в' ' тегов только ссылки на белый пиксель. Фактические изображения находятся в атрибуте 'data-original', который не появляется, когда функция отключена в этом методе. @vletech – MonkeyTyping

ooo ok Я вижу, это должно быть простое исправление. Все, что вам нужно сделать, это использовать функцию 'each()', чтобы поменять все атрибуты 'img'' src' на их атрибут 'data-original'. Я отредактировал свой ответ выше, чтобы включить оператор 'else', который, надеюсь, достигнет этого. – dev

Функции 'if' и' else' должны были переключаться, но смена «src» и «data-original» работает отлично. БОЛЬШОЕ СПАСИБО! Это сводило меня с ума. – MonkeyTyping

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

ответ

Смежные вопросы