所以我在一个网站上使用了延迟加载,它在我迄今为止测试过的每一个浏览器中都运行良好。但在移动设备上,图像加载时间更长,因此“不可见”的时间太长。我想知道,当移动设备访问页面时禁用延迟加载的最佳方法是什么?
这并不像if (typeof window.orientation !== 'undefined') return;
在调用之前放一行那么简单,.lazyload
因为在新浏览器中所做的更改延迟加载需要更改的 HTML,其中空白占位符用作 thesrc
并且实际图像放置在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>
代码?任何解决此问题的想法将不胜感激。谢谢!