iscroll 和 lazyload 应该都是大家很常用的插件了.

iscroll 在移动端很好的兼容性和滑动性能帮了我们很多忙. lazyload 就不用再说了,老牌图片延迟加载的插件了。

图片优化

1. 不加载看不见的图

不加载用户看不见的(不再屏幕范围内的图片)图片,也就是 图片 lazyload策略

其实任何资源.包括DOM都是可以lazyload的!

2. 图片预压缩

推荐工具: (Mac) imageOptim.

3. 使用webp 格式.

这个可以大幅减小图片大型.

可以用. cwebp / imagemagick 等命令行工具转换.

判断浏览器是否支持 webp: 可以检查请求头中的 Accept 字段是否包含 image/webp;或者判断 JS 创建的 DataURI 格式的 webp 图片是否加载成功。后者一般还要配合存一个 Cookie。

图片托管

如果自己托管. 不要开启 gzip. 几乎没效果.还浪费cpu

如果是在 七牛等CDN上的 可以参考对应文档. 对图片进行 webp 格式转换. 七牛图片处理 文档!!!1

图片 html 指定宽高.

可以避免 加载图片带来的 页面跳动.

延迟加载: 用到的时候才加载!!!! 可以 提高一些性能.

网站性能优化插件. 提高用户体验.

比如: 图片很多的时候. 滚动到对应的图片才加载.

延迟加载原理

把页面内所有需要加载的图片全部换成一张默认图片.(尺寸非常小.) 只有当图片在可视区域内时候才真的去加载.

一般都使用插件的!!! 常见的是 jquery.lazyload.js 依赖jquery.

缺点:

每张图片 都要定义一下… 很麻烦的啊… 如果图片过大.. 滚动到图片 下载 也要时间的…

有插件的话…. 就好了…

优点

可以减少服务器压力. 如果你不看下面图片的话. 加载就是浪费.

使用方法:

  1. Html里引入插件.

  2. js 文件中加入(外面不需要加 onready 上面的): $(“img.lazy”).lazyload();

  3. 根目录 添加一张默认图片. 越小越好..
  4. 图片添加.data-original 属性 还要设置高宽.: 这里src 指向占位图片链接.
    original 填写真的图片链接.

lazyload 会自动绑定这个属性.有这个属性 才可以 lazyload

现在加载出来的都是 占位图片…. 滚动点击都没有 真实图片出来..

因为 第二步里面的js 更不没有运行啊 好像….

加个 鼠标滚动事件 来触发 2 里 的js 试试.

用上这个 鼠标滚动就可以出来图片了.!!!!

终于知道了. 用的是ajax. 然后网页取回来的只是 网页内容. 是不会运行js的!!!!

要运行js… 还是得绑定 鼠标事件啊…

Lazyload 配置:

$("img.lazy").lazyload({
threshold : 200
});

设置效果

$("img.lazy").lazyload({
effect : "fadeIn"
});

监听事件

click / mouseover … $(“img.lazy”).lazyload({ event : “click” });

图片占位

#container {
height: 600px;
overflow: scroll;
}


$("img.lazy").lazyload({
 container: $("#container")
});

LazyLoad 图片测试

a picture

a picture

a picture

a picture

a picture

注意点!

网站使用https 的话. 外链也要是 https的 …. 反正谷歌浏览器是这样的….

七牛外链 https 看我别的文章