我正在尝试创建一个图片库。当我尝试添加大约20个不同的图像时，我的滚动条变得粗糙并且变慢了。有什么建议吗? ?
-
确保添加了
width和height属性。在我的网页上，当我添加它们时，由于某种原因，它在Safari和Chrome上加载得更快一些，但在其他浏览器上没有区别。 -
你也可以尝试延迟加载你的图像。
-
确保你调整你的图片的大小，他们将在你的网页上显示
你的问题很模糊，是图像慢还是滚动条慢?
如果图片:
永远不要用css width height属性来调整图像的大小。这将加载整个图像，非常慢。相反，在上传之前调整图片的大小，或者在上传时使用拇指生成器调整图片的大小。
如果图像很小(小于100像素的高度或宽度)，您可以在生成拇指时降低其质量，因此文件大小较小，但没有明显影响。
使用正确的文件格式。- GIF动画- PNG小无关紧要的图形，如徽标和图标- JPG用于更高质量的图形，如图像
您是否在将内容发送到服务器之前将其压缩?
可以为你的图像使用CDN，比如AWS S3，但不要使用flick/picassa，因为他们会在提供图像之前"查找"你的图像，这会慢得多。仅使用CDN (AWS S3)将比您当前的主机更好，因为它们已针对快速查找进行了优化，与大多数web主机相比，等待时间减少了50-90%。
只使用一个CDN，一旦域名的DNS查找发生，浏览器将缓存它。
如果您的站点使用cookie或会话将图像存储在不同的URL上(这可以是您站点的子域)，这样cookie和会话数据就不会随每个图像请求一起发送(减慢速度)。
如果图形被重复使用，设置一个超时参数(未来几个月)，以便浏览器在本地缓存它们。
编辑:我也同意在网页中根据需要/可见性加载图像是一个很好的做法。
如果滚动条:
是否使用自定义滚动条和/或自定义滚动事件?如果是这样，您可能需要设置一个阈值(我建议设置为100ms)，以确定触发resize事件的频率。或者在加载图像后手动触发resize事件，就好像在您的场景中您知道图像何时已经加载。
尝试使用jQuery延迟加载图像。下面是一个插件:http://www.appelsiini.net/projects/lazyload
下面是我使用延迟加载的一个例子:https://www.lunatickets.co.uk(向下滚动页面并观看图像)。
还要确保浏览器没有调整图片的大小!确保你已经为网页优化了它们!
-
确保你添加了宽度/高度属性到你的img标签- other你的浏览器/网站布局将"跳来跳去"，因为它加载它们。
-
如果您插入图像尝试调整它们的大小到适当的在加载它们之前的宽度/高度。您的浏览器将运行较慢，如果它
尽量不要一次加载所有图片。
像这样的幻灯片:http://sandbox.scriptiny.com/slideshow/，他们只加载显示的图像加上一些下一个。我最后使用的图库加载了当前图像和接下来的10个图像。我不记得名字了，但我想应该这样做。
您是否尝试过将您的图像保存在S3, Flickr或Picasso上?让他们的服务器承担HTTP请求的攻击