1

ウェブサイトで遅延読み込みを使用していますが、これまでにテストしたすべてのブラウザーでうまく機能します。ただし、モバイル デバイスでは、画像の読み込みに時間がかかるため、長時間「見えない」ままになります。ページがモバイル デバイスでアクセスされているときに遅延読み込みを無効にする最善の方法は何ですか?

if (typeof window.orientation !== 'undefined') return;呼び出しの前に行を挿入するだけでこれが単純ではない理由は.lazyload、新しいブラウザーで行われた変更のためです。Lazy Load では、空白のプレースホルダーが として使用されsrc、実際の画像がdata-original属性に配置される変更された HTML が必要です。その結果、Lazy Load が無効になっている場合、ユーザーには実際の画像ではなく、プレースホルダーのみが表示されます。

現在、ウェブサイトからの関連コードは次のとおりです。

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

<noscript>タグ内のコードを使用するように、モバイル デバイスでサイトにアクセスした場合に JavaScript が完全にオフになるように設定する方法はありますか? この問題を回避するためのアイデアをいただければ幸いです。ありがとう！

4

1 に答える 1

3

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'));
   });
}
于 2013-02-23T19:02:55.173 に答える