title: Disable lazy load for mobile devices
body: <p>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? </p>
  
  <p>The reason this isn't as simple as just putting the line <code>if (typeof window.orientation !== 'undefined') return;</code> before calling <code>.lazyload</code> is because of changes made in new browsers Lazy Load requires altered HTML in which blank place-holders are used as the <code>src</code> and the actual images are placed in the <code>data-original</code> attribute. As a result when Lazy Load is disabled the user just sees the placeholders and not the actual images.</p>
  
  <p>Here is the relevant code from the website currently:</p>
  
  <pre><code>&lt;head&gt;
  &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"&gt;
  &lt;script type="text/javascript" src="js/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery.lazyload.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  var $j = jQuery.noConflict();
  $j(function() { 
  if (typeof window.orientation !== 'undefined') return;
  $j("img").lazyload({
      placeholder : "images/white.gif",
      effect: "fadeIn",
  });
  });
  &lt;/script&gt;
  
  &lt;style type="text/css"&gt;
  #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;
  }
  &lt;/style
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="content"&gt;
      &lt;img class="lazyload" src="white.jpg" data-original="photo01.jpg" alt="photo01"/&gt;
      &lt;noscript&gt;&lt;img src="photo01.jpg"&gt;&lt;/noscript&gt;
      &lt;img class="lazyload" src="white.jpg" data-original="photo02.jpg" alt="photo02"/&gt;
      &lt;noscript&gt;&lt;img src="photo02.jpg"&gt;&lt;/noscript&gt;
      &lt;img class="lazyload" src="white.jpg" data-original="photo03.jpg" alt="photo03"/&gt;
      &lt;noscript&gt;&lt;img src="photo03.jpg"&gt;&lt;/noscript&gt;
      &lt;img class="lazyload" src="white.jpg" data-original="photo04.jpg" alt="photo04"/&gt;
      &lt;noscript&gt;&lt;img src="photo04.jpg"&gt;&lt;/noscript&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>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 <code>&lt;noscript&gt;</code> tags? Any ideas of working around this issue would be greatly appreciated. THANKS!</p>