禁用移动设备的延迟加载答案

【问题标题】：Disable lazy load for mobile devices禁用移动设备的延迟加载
【发布时间】：2013-02-23 18:54:39
【问题描述】：

所以我在网站上使用延迟加载，它在迄今为止我测试过的所有浏览器中都运行良好。但在移动设备上，图像加载时间更长，因此“不可见”的时间太长。我想知道，当移动设备访问页面时禁用延迟加载的最佳方法是什么？

这并不像在调用.lazyload 之前添加行if (typeof window.orientation !== 'undefined') return; 那样简单，因为在新浏览器中进行了更改延迟加载需要更改HTML，其中空白占位符用作src并且实际图像放置在data-original 属性中。因此，当延迟加载被禁用时，用户只会看到占位符而不是实际的图像。

这是目前网站上的相关代码：

<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> 标记中的代码？任何解决此问题的想法将不胜感激。谢谢！

【问题讨论】：

标签： jquery mobile lazy-loading

【解决方案1】：

如果是移动设备，您可以使用 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'));
   });
}

【讨论】：

但是如果函数没有运行，那么访问者只会看到空白占位符，因为<img> 标签中的src 属性只是链接到一个白色像素。实际图片在data-original属性中，在此方法中禁用该功能时不会出现。 @vletech
ooo 好的我明白了，这应该是一个简单的修复。您需要做的就是使用each() 函数将所有img src 属性交换到它们的data-original 属性。我在上面编辑了我的答案，包括一个 else 声明，希望能实现这一点。
if 和 else 函数必须调换，但 'src' 和 'data-original' 交换工作完美。非常感谢！这让我发疯了。