CODEWITHSUNDEEP
jquerymobilelazy-loading
RasterEyes
RasterEyes

Reputation: 57

Disable lazy load for mobile devices

So I'm using lazy load on a website and it works great in every browser I've tested on so far. But on mobile devices the images take longer to load and, therefore, remain "invisible" for too long. I'm wondering, what is the best way to disable lazy load when the page is being visited by a mobile device?

The reason this isn't as simple as just putting the line if (typeof window.orientation !== 'undefined') return; before calling .lazyload is because of changes made in new browsers Lazy Load requires altered HTML in which blank place-holders are used as the src and the actual images are placed in the data-original attribute. As a result when Lazy Load is disabled the user just sees the placeholders and not the actual images.

Here is the relevant code from the website currently:

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

Is there maybe a way to set it up so javascript is turned off completely if the site is visited by a mobile device so that it would use the code in the <noscript> tags? Any ideas of working around this issue would be greatly appreciated. THANKS!

Upvotes: 1

Views: 10224

Answers (1)

dev
dev

Reputation: 4009

You can use the appEngines to detect the browser type and then not run the function if it is a mobile device.

E.g. 

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'));
   });
}

Upvotes: 3

Related Questions