jquery - Delay occurring during horizontal slide in Chrome only

Question

I'm creating this website where the pages slide horizontally. One of the pages (media) contains 10-15 pictures that are 60px in height and 80 px in width. The problem is when I make the pages "travel" from home to contact us, there's a slight delay in sliding caused by Media page in Chrome. However I noticed this slight delay isn't in Firefox or IE, in fact it goes smoothly. So I'm wondering if there's a fix other than re-sizing since I already made all of the pictures in smaller sizes (60kb or so).

Thank you for any suggestions in advance

The format is basically like this:

<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);
 }); }); 

---

Basically panel is how big each page will be and float to the left of each page.

Link: http://permika-montreal.tk/new.php

Answer 1

通过chromes web-inspector我删除了图像links，它滚动得很好。注意到您将link图像按比例缩小了css。我认为如此大量的数据导致您的延误。尝试仅为链接重新调整图像大小以限制面板的大小。这应该可以消除使用 chrome 滚动的延迟。

Answer 2

只需输入图像的宽度和高度！