【问题标题】:Efficient jQuery or HTML5 image slider高效的 jQuery 或 HTML5 图像滑块
【发布时间】:2012-05-04 13:22:37
【问题描述】:

我有一个朋友正在制作投资组合网站。他有一些他想显示的高分辨率图像。一页上会有多个项目,每个项目有几个图像。因此,他希望尽可能减少加载时间,同时也节省系统内存使用量。话虽如此,他担心如果在同一页面上多次调用传统的 jQuery 滑块会占用太多内存。此外,在初始化时加载所有图像也不是一种选择,因为这会导致加载时间过长。有谁知道任何可以帮助解决此问题的图像滑块,无论是 jQuery 还是 HTML5,或者两者兼而有之?

【问题讨论】:

  • 为什么每次都用jQuery来拉多张图片,你可以用一次就拉出所有的图片。并且本质上是在页面加载后加载图像,这不会影响加载时间。或者有一些脚本可以帮助同时加载。
  • 首先,请记住,在浏览器中显示高分辨率图像并不是很有效。分辨率应降低到浏览器可以显示的最大值 (72dpi)。通过点击低分辨率图片或低分辨率图片附近的链接,应该可以访问完整尺寸的高分辨率版本的图片。
  • 只需使用 sliderjs 并继续前进 - sliderjs.org
  • 我猜任何 jQuery 滑块都会害怕在你的朋友网站上工作!

标签: javascript jquery html


【解决方案1】:

在花时间搜索 good jQuery 滑块之前...

...从基础开始:

  1. 开始遵循一般的网页设计最佳实践,例如theese
  2. 保持您的网页小于 100 KB 和load fast ? (越少越好)
  3. 使用CDN(内容交付网络)存储高清图像。
  4. 仅按需加载高清图像,不要预加载。
  5. 使用compressedconverted(避免使用png)并调整图像大小以适合滑块容器。
  6. 不要使用 CSS 或内联 CSS 缩放图像。 (既不是服务器端)
  7. 利用Lazy loading 设计模式。 (如果你说有很多图片,页面会很长)

【讨论】:

    猜你喜欢
    • 2015-11-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-06-12
    • 2012-01-12
    • 2012-09-18
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多