bttrlazyloading won't load correct image for xs screen

Question

Want to use Julian Renaux's wonderful bttrlazyloading (1.0.8) script to load a long page with 300+ images so each image only lazy loads when they are in the window view. Works perfectly for tablet, laptop and desktop size screens, but for phone and iPod screens I want to load a 1 pixel image instead (or no image at all).

Here's my abbreviated HTML5 code...

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="tvgc.css" type="text/css" rel="stylesheet" />
<link href="bttrlazyloading.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="jquery.bttrlazyloading.js"></script>
<script type="text/javascript">
<!-- 
$(function() {
$('img.bttrlazyloading').bttrlazyloading()
});
-->
</script>
<title>The Title</title>
</head>
<body>
<div class="left"><img id="imgA001" class="bttrlazyloading" alt="Image" 
data-bttrlazyloading-xs='{"src": "dot.gif", "width" : 1, "height" : 1}' 
data-bttrlazyloading-sm='{"src": "applebees4x2.jpg", "width" : 288, "height" : 160}' 
data-bttrlazyloading-delay="500" /></div>
Applebee Description goes here
<div class="left"><img id="imgA002" class="bttrlazyloading" alt="Image" 
data-bttrlazyloading-xs='{"src": "dot.gif", "width" : 1, "height" : 1}' 
data-bttrlazyloading-sm='{"src": "athens3x2.jpg", "width" : 252, "height" : 168}' 
data-bttrlazyloading-delay="500" /></div>
Athens Description goes here
<div class="left"><img id="imgA003" class="bttrlazyloading" alt="Image" 
data-bttrlazyloading-xs='{"src": "dot.gif", "width" : 1, "height" : 1}' 
data-bttrlazyloading-sm='{"src": "avalon3x2.jpg", "width" : 252, "height" : 168}' 
data-bttrlazyloading-delay="500" /></div>
Avalon Description goes here
then 300 more
</body></html>

I also modified the bttrlazyloading javascript to this...

BttrLazyLoadingGlobal.options = {
xs: {
src: "dot.gif",
width: 1,
height: 1
},
sm: {
src: null,
width: 100,
height: 100
}
}

(since all images for xtra small screens would be the same)

My iPod and iPhone continue to load the full size image instead of the 1 pixel special image. What am I doing wrong?

Also it won't HTML validate unless I change to this (inserting src= ) code...

<img src="dot.gif" id="imgA001"

for each image. And seems to have no effect on the lazy loading (which is a good thing).

(I'm still learning JavaScript)

TIA, Rich C.

UPDATE: Moved all JS loading from '<head>' to before '</body>' with no help. It will not show xs 1px image on an iPod Touch (320x450 screen) Gen.3 ioS 6 Safari or iPhone 4S (960x640 screen) iOS 8 Safari. It lazy loads full size image like on a desktop. It does work correctly on a desktop if you narrow the window to smaller than 767 pxs and reload the page. Then it lazy loads the 1 px image. So the script works the way it should but NOT on Safari mobile. Have to find someone with other xs mobile devices. 3/17/15 Rich C. — Rich C

Shprink Shprink · Accepted Answer · 2015-03-17T22:22:27

Check this codepen out: http://codepen.io/shprink/pen/WbYYNb

<div class="parent"><img id="imgA002" class="bttrlazyloading" alt="Image" data-bttrlazyloading-xs='{"src": "http://bttrlazyloading.julienrenaux.fr/demo/img/300x300.jpg", "width" : 300, "height" : 300}' data-bttrlazyloading-sm='{"src": "http://bttrlazyloading.julienrenaux.fr/demo/img/350x350.jpg", "width" : 350, "height" : 350}' data-bttrlazyloading-delay="10" /></div>

If your image dot.gif exists, there is no reason it does not load correctly. Try to fork this codepen and reproduce your problem for further investigation.

EDIT

The window width should be determined using the dpi and it is not. A hack would be to use a specific configuration for iphones/ipad using the following code:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { $.bttrlazyloading.setRanges({ xs: 319, sm: 320, md: 992, lg: 1200 }); }

Cheers

bttrlazyloading won't load correct image for xs screen

2 Answers