0

ページが横にスライドするこのウェブサイトを作成しています。ページの1つ(メディア)には、高さ60ピクセル、幅80ピクセルの10〜15枚の画像が含まれています。問題は、ページを自宅から「移動」させて連絡するときに、Chromeのメディアページが原因でスライドがわずかに遅れることです。ただし、このわずかな遅延はFirefoxやIEにはないことに気づきました。実際、スムーズに進んでいます。ですから、私はすでにすべての写真をより小さなサイズ(60kb程度)で作成しているので、サイズ変更以外の修正があるかどうか疑問に思っています。

事前にご提案ありがとうございます

形式は基本的に次のようになります。

<div class="pannel"><br/> <br/>
    <a href="images/a (74).jpg" class="mediaPhotos"><img src="images/a (74).jpg"/></a>
    <a href="images/a (75).jpg" class="mediaPhotos"><img src="images/a (75).jpg"/></a>
    <a href="images/a (76).jpg" class="mediaPhotos"><img src="images/a (76).jpg"/></a>
    <a href="images/a (77).jpg" class="mediaPhotos"><img src="images/a (77).jpg"/></a>
    <a href="images/a (78).jpg" class="mediaPhotos"><img src="images/a (78).jpg"/></a>
    <a href="images/a (79).jpg" class="mediaPhotos"><img src="images/a (79).jpg"/></a>
    <a href="images/a (80).jpg" class="mediaPhotos"><img src="images/a (80).jpg"/></a>
    <a href="images/a (81).jpg" class="mediaPhotos"><img src="images/a (81).jpg"/></a>
    <a href="images/a (82).jpg" class="mediaPhotos"><img src="images/a (82).jpg"/></a>
    <a href="images/a (83).jpg" class="mediaPhotos"><img src="images/a (83).jpg"/></a>
    <a href="images/a (84).jpg" class="mediaPhotos"><img src="images/a (84).jpg"/></a>
</div>

.panel {    
    float               : left;
    height              : 800px;
    padding-right       : 1000px;
    width               : 850px;
}

.mediaPhotos img {
    border              : 3px solid #bfb886;
    border-radius       : 5px;
    height              : 60px;
    width               : 80px;
}

$(document).ready(function() {
 $("#menuFloat a").bind("click",function(event){ event.preventDefault();
  var target = $(this).attr("href");
   $("html, body").stop().animate({ scrollLeft: $(target).offset().left, scrollTop: $(target).offset().top }, 1200);
 }); }); 

基本的panelには、各ページの大きさであり、各ページの左側に浮かんでいます。

リンク: http: //permika-montreal.tk/new.php

4

2 に答える 2

0

画像をchromes web-inspector削除するlinksと、うまくスクロールしました。link画像が。で縮小されていることに気づきましたcss。この大量のデータが遅延の原因になっていると思います。パネルのサイズを制限するために、リンクのためだけに画像のサイズを変更してみてください。これにより、chromeでのスクロールの遅延が解消されます。

于 2013-02-02T00:36:13.230 に答える
0

画像の幅と高さを入れるだけ!

于 2015-02-13T21:10:07.723 に答える