Question

我正在创建这个页面水平滑动的网站。其中一页（媒体）包含10-15张高60像素，宽80像素的图片。问题是，当我从家里“浏览”页面与我们联系时，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

Answer 1

通过chromes web-inspector我删除了图片links并且滚动得很好。注意到您使用link缩小了css张图片。我认为这些大量数据会导致您的延迟。尝试仅为链接重新调整图像大小以限制面板的大小。这应该摆脱使用chrome滚动的延迟。

Answer 2

只需放置图像的宽度和高度！

仅在Chrome中水平滑动时发生延迟

2 个答案: