jquery - 禁用移动设备的延迟加载

标签 jquery mobile lazy-loading

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

原因并不像只输入 if (typeof window.orientation !== 'undefined') return; 这么简单在调用.lazyload之前是因为新浏览器中进行的更改延迟加载需要更改 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> 中的代码标签?任何解决此问题的想法将不胜感激。谢谢!

最佳答案

您可以使用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'));
   });
}

关于jquery - 禁用移动设备的延迟加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15044288/

相关文章:

php - Blueimp jQuery 文件上传,传递额外的表单数据

java - 如何按位置设置 ListView 中特定项目的背景颜色?

javascript - 延迟加载组件时出现意外 token

java - 无法写入 JSON : failed to lazily initialize a collection of role: com. Managem.model.Region.pays,无法初始化代理 - 无 session

jquery - 如何选择除特定 ID 之外的所有输入?

jquery - 区分 jquery 地址插件中的后退/前进

javascript - 响应式菜单问题 - 如何在移动环境中处理 HREF 和 onclick 事件

iphone - 启用移动网站缩放

javascript - jQuery 延迟加载 - 显示问题 :none

javascript - Jquery函数运行多次