I am trying to create an image gallery. My scroll bar gets rough and slows down when i try to add some 20 different images. Any suggestions??
我正在尝试创建一个图库。当我尝试添加20个不同的图像时,我的滚动条会变得粗糙并变慢。有什么建议??
6 个解决方案
#1
2
-
Make sure you add the
widthandheightattributes. On my webpage when I added them, for some reason it loaded a little bit faster on Safari and Chrome but made no difference on the other browsers.确保添加width和height属性。在我添加它们的网页上,出于某种原因,它在Safari和Chrome上的加载速度稍快,但在其他浏览器上没有任何区别。
-
You can also try lazy loading your images. It really makes a difference.
您也可以尝试延迟加载图片。它真的有所作为。
-
Make sure you resize your images to the size they are going to be displayed on your webpage.
确保将图像大小调整为将在网页上显示的大小。
#2
1
Try lazy loading your images using jQuery. Here's a plugin: http://www.appelsiini.net/projects/lazyload
尝试使用jQuery延迟加载图像。这是一个插件:http://www.appelsiini.net/projects/lazyload
Here's an example of when I've used lazy loading: https://www.lunatickets.co.uk (scroll down the page and watch the images).
这是我使用延迟加载的一个例子:https://www.lunatickets.co.uk(向下滚动页面并观看图像)。
Also make sure the browser isn't resizing your images! Make sure you've optimised them for the web!
还要确保浏览器没有调整图像大小!确保您已经为网络优化了它们!
#3
1
-
Make sure you add width/height attributes to your img tags - other wise your browser/website layout will "jump around" as it loads them.
确保你的img标签添加宽度/高度属性 - 另外,你的浏览器/网站布局会在加载它们时“跳转”。
-
If your inserting images try resizing them to the appropriate width/height before you load them. Your browser will run slower if it is resizing the large images to display smaller.
如果插入图像在加载之前尝试将它们调整到适当的宽度/高度。如果调整大图像的大小以显示更小,则浏览器将运行得更慢。
#4
1
Your question is vague, is it the images or scroll bars that are slow?
你的问题很模糊,是图像还是滚动条很慢?
If images:
Never resize your images with css width height properties. This will load the entire image and be very slow. Instead resize images before uploading them, or have a thumb generator resize them on upload.
切勿使用css宽度高度属性调整图像大小。这将加载整个图像并且非常慢。而是在上传之前调整图像大小,或者在上传时让拇指生成器调整大小。
If the image is small (less than 100 pixels height or width) you can reduce it's quality when generating the thumb, so the file-size is smaller but to no noticable affect.
如果图像很小(高度或宽度小于100像素),则在生成拇指时可以降低图像的质量,因此文件大小较小但不会产生明显的影响。
Use the correct file format. - gif for animation - png for small inconsequential graphics like logos and icons - jpg for higher quality graphics like images
使用正确的文件格式。 - 用于动画的gif - 用于标识和图标等小的无关紧要的图形的png - 用于图像等高质量图形的jpg
Are you gzipping content before sending it on the server?
您是否在将内容发送到服务器之前对其进行了解压缩?
Use a CDN for your images like AWS S3 yes, but DO NOT USE flick/picassa as they will 'look up' your image before serving it, which will be much slower. Using just a CDN (AWS S3) will be better than your current hosting as they've been optimised for quick look ups, reducing the wait time by 50-90% compared to most web hosts.
对像AWS S3这样的图像使用CDN是的,但不要使用flick / picassa,因为它们会在服务之前“查找”你的图像,这会慢得多。仅使用CDN(AWS S3)将比您当前的主机更好,因为它们已经过优化以便快速查找,与大多数Web主机相比,等待时间缩短了50-90%。
Use only one CDN, once the DNS look up has taken place for the domain your browser will cache it.
只有一个CDN,一旦您的浏览器将缓存它的域进行DNS查找。
If your site uses cookies or sessions store the images on a different URL (this can be a subdomain of your site), so that the cookies and session data aren't sent with each image request (slowing it down).
如果您的站点使用cookie或会话将图像存储在不同的URL上(这可能是您站点的子域),那么Cookie和会话数据不会随每个图像请求一起发送(减慢速度)。
If the graphics are re-used set a time out parameter on them (a couple of months in the future), so that the browser caches them locally.
如果重新使用图形,则在它们上设置一个超时参数(将来几个月),以便浏览器在本地缓存它们。
EDIT: I would also agree that loading images on demand/visibility in webpage is a very good practice.
编辑:我也同意在网页上按需加载/可见性加载图像是一种非常好的做法。
If scroll bars:
如果滚动条:
Are you using custom scroll bars and or a custom scroll event? If so, you may want to put a threshold (I recommend 100ms) for how often your resize event can be fired. Or manually fire the resize event after loading the images, as if in your scenario you know when the images have been loaded.
您使用自定义滚动条和/或自定义滚动事件?如果是这样,您可能希望为触发调整大小事件的频率设置一个阈值(我建议100毫秒)。或者在加载图像后手动触发调整大小事件,就像在您的场景中一样,您知道图像何时被加载。
#5
0
Try not to load all images at once.
尽量不要一次加载所有图像。
Slideshows like this: http://sandbox.scriptiny.com/slideshow/, they only load the showed image plus some of the next. The gallery I last used loaded the current image and the next 10 images. I don't remember the name, but I think that is the way to do it.
像这样的幻灯片:http://sandbox.scriptiny.com/slideshow/,他们只加载显示的图像加上下一些。我上次使用的画廊加载了当前图像和接下来的10张图像。我不记得这个名字,但我认为这是做到这一点的方法。
#6
0
Have you tried keeping your images on S3, Flickr or Picasso? Let their servers take the hit for the HTTP requests
您是否尝试过将图像保存在S3,Flickr或Picasso上?让他们的服务器获取HTTP请求的命中
#1
2
-
Make sure you add the
widthandheightattributes. On my webpage when I added them, for some reason it loaded a little bit faster on Safari and Chrome but made no difference on the other browsers.确保添加width和height属性。在我添加它们的网页上,出于某种原因,它在Safari和Chrome上的加载速度稍快,但在其他浏览器上没有任何区别。
-
You can also try lazy loading your images. It really makes a difference.
您也可以尝试延迟加载图片。它真的有所作为。
-
Make sure you resize your images to the size they are going to be displayed on your webpage.
确保将图像大小调整为将在网页上显示的大小。
#2
1
Try lazy loading your images using jQuery. Here's a plugin: http://www.appelsiini.net/projects/lazyload
尝试使用jQuery延迟加载图像。这是一个插件:http://www.appelsiini.net/projects/lazyload
Here's an example of when I've used lazy loading: https://www.lunatickets.co.uk (scroll down the page and watch the images).
这是我使用延迟加载的一个例子:https://www.lunatickets.co.uk(向下滚动页面并观看图像)。
Also make sure the browser isn't resizing your images! Make sure you've optimised them for the web!
还要确保浏览器没有调整图像大小!确保您已经为网络优化了它们!
#3
1
-
Make sure you add width/height attributes to your img tags - other wise your browser/website layout will "jump around" as it loads them.
确保你的img标签添加宽度/高度属性 - 另外,你的浏览器/网站布局会在加载它们时“跳转”。
-
If your inserting images try resizing them to the appropriate width/height before you load them. Your browser will run slower if it is resizing the large images to display smaller.
如果插入图像在加载之前尝试将它们调整到适当的宽度/高度。如果调整大图像的大小以显示更小,则浏览器将运行得更慢。
#4
1
Your question is vague, is it the images or scroll bars that are slow?
你的问题很模糊,是图像还是滚动条很慢?
If images:
Never resize your images with css width height properties. This will load the entire image and be very slow. Instead resize images before uploading them, or have a thumb generator resize them on upload.
切勿使用css宽度高度属性调整图像大小。这将加载整个图像并且非常慢。而是在上传之前调整图像大小,或者在上传时让拇指生成器调整大小。
If the image is small (less than 100 pixels height or width) you can reduce it's quality when generating the thumb, so the file-size is smaller but to no noticable affect.
如果图像很小(高度或宽度小于100像素),则在生成拇指时可以降低图像的质量,因此文件大小较小但不会产生明显的影响。
Use the correct file format. - gif for animation - png for small inconsequential graphics like logos and icons - jpg for higher quality graphics like images
使用正确的文件格式。 - 用于动画的gif - 用于标识和图标等小的无关紧要的图形的png - 用于图像等高质量图形的jpg
Are you gzipping content before sending it on the server?
您是否在将内容发送到服务器之前对其进行了解压缩?
Use a CDN for your images like AWS S3 yes, but DO NOT USE flick/picassa as they will 'look up' your image before serving it, which will be much slower. Using just a CDN (AWS S3) will be better than your current hosting as they've been optimised for quick look ups, reducing the wait time by 50-90% compared to most web hosts.
对像AWS S3这样的图像使用CDN是的,但不要使用flick / picassa,因为它们会在服务之前“查找”你的图像,这会慢得多。仅使用CDN(AWS S3)将比您当前的主机更好,因为它们已经过优化以便快速查找,与大多数Web主机相比,等待时间缩短了50-90%。
Use only one CDN, once the DNS look up has taken place for the domain your browser will cache it.
只有一个CDN,一旦您的浏览器将缓存它的域进行DNS查找。
If your site uses cookies or sessions store the images on a different URL (this can be a subdomain of your site), so that the cookies and session data aren't sent with each image request (slowing it down).
如果您的站点使用cookie或会话将图像存储在不同的URL上(这可能是您站点的子域),那么Cookie和会话数据不会随每个图像请求一起发送(减慢速度)。
If the graphics are re-used set a time out parameter on them (a couple of months in the future), so that the browser caches them locally.
如果重新使用图形,则在它们上设置一个超时参数(将来几个月),以便浏览器在本地缓存它们。
EDIT: I would also agree that loading images on demand/visibility in webpage is a very good practice.
编辑:我也同意在网页上按需加载/可见性加载图像是一种非常好的做法。
If scroll bars:
如果滚动条:
Are you using custom scroll bars and or a custom scroll event? If so, you may want to put a threshold (I recommend 100ms) for how often your resize event can be fired. Or manually fire the resize event after loading the images, as if in your scenario you know when the images have been loaded.
您使用自定义滚动条和/或自定义滚动事件?如果是这样,您可能希望为触发调整大小事件的频率设置一个阈值(我建议100毫秒)。或者在加载图像后手动触发调整大小事件,就像在您的场景中一样,您知道图像何时被加载。
#5
0
Try not to load all images at once.
尽量不要一次加载所有图像。
Slideshows like this: http://sandbox.scriptiny.com/slideshow/, they only load the showed image plus some of the next. The gallery I last used loaded the current image and the next 10 images. I don't remember the name, but I think that is the way to do it.
像这样的幻灯片:http://sandbox.scriptiny.com/slideshow/,他们只加载显示的图像加上下一些。我上次使用的画廊加载了当前图像和接下来的10张图像。我不记得这个名字,但我认为这是做到这一点的方法。
#6
0
Have you tried keeping your images on S3, Flickr or Picasso? Let their servers take the hit for the HTTP requests
您是否尝试过将图像保存在S3,Flickr或Picasso上?让他们的服务器获取HTTP请求的命中