Question

想要使用Julian Renaux的精彩bttrlazyloading（1.0.8）脚本来加载包含300多张图像的长页面，这样每个图像在窗口视图中时只会延迟加载。适用于平板电脑，笔记本电脑和台式机屏幕，但对于手机和iPod屏幕，我想加载一个1像素的图像（或根本没有图像）。

这是我的缩写HTML5代码......

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

我还修改了bttrlazyloading javascript到这个...

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

（因为xtra小屏幕的所有图像都是相同的）

我的iPod和iPhone继续加载全尺寸图像而不是1像素特殊图像。我究竟做错了什么？

除非我改为此（插入src =）代码......

，否则它不会进行HTML验证

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

每张图片。并且似乎对延迟加载没有影响（这是一件好事）。

（我还在学习JavaScript）

TIA，Rich C。

Answer 1

检查此codepen：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>

如果您的图像dot.gif存在，则没有理由不正确加载。尝试分叉这个codepen并重现你的问题以便进一步调查。

修改

窗口宽度应使用dpi确定，而不是。黑客将使用以下代码使用iphone / ipad的特定配置：

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

干杯

Answer 2

我添加了黑客，它现在按照我想要的方式工作。我认为比481窄的设备应该不显示图像（实际上是1像素图像）。希望这是正确的补充。

BttrLazyLoadingGlobal = (function() {
    function BttrLazyLoadingGlobal() {}
    BttrLazyLoadingGlobal.prototype.version = '1.0.8';
    BttrLazyLoadingGlobal.ranges = {
      xs: 480,
      sm: 481,
      md: 992,
      lg: 1200
    };
    
   if( /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 $.bttrlazyloading.setRanges({
    xs: 480,
    sm: 481,
    md: 992,
    lg: 1200
});
};

感谢您的帮助。

...富

bttrlazyloading将无法为xs屏幕加载正确的图像

2 个答案: