轩枫阁

首页 / Web前端 / 授人以渔 / Javascript / 图片加载优化及图片lazyload自适应

图片加载优化及图片lazyload自适应

前言

本文介绍针对轩枫阁V3主题开发过程中,遇到的图片问题及加载优化。

图片居中裁剪

本站的每一篇文章,都会配一张570×200的特色图像,使文章不那么单调。

然而移动端移动端首页图片为60×60的正方形配图,这里有两种解决方案。

sdgsfhbsfh

  1. 设置缩略图大小,在wp管理端-设置-多媒体,设置缩略图尺寸为1:1
  2. 结合CSS3的background-size,将配图作为背景图,并显示中间的正方形区域即可

方法一可以安装插件,将旧文章的图片重新生成。由于轩枫阁在V3主题上线前,已更新400篇文章,使用方法一意味着图片存储会增加,而且意义不大。

而这一表现仅在移动端,所以可以完美使用CSS3,。

lazyload

lazyload即图片懒加载,滚动到的图片才会加载,节省流量及加快加载速度,提升体验。

wp如何使用lazyload呢?在functions.php加上如下代码

这时候所有的图片src会替换成灰色底图,可以结合lazyload.js(推荐用jieyou的版本,jquery.lazyload.js提供的方法不够多)。

PC端

使用之后,会发现存在一些问题。如发现图片加载之后,页面发生抖动,或者超大图产生变形的问题。

在PC端如果从上往下读,正常网速下,图片抖动的机会比较小,所以这个点只在移动端处理。

页面输出的img结构

其中会包括图片本身的宽高,data-original为原图url。

发现对于超出页面显示宽度的大图,会存在变形的问题,如1200×848的图(文章地址),自适应会显示成802×848的尺寸:

sdvvsbvsfn

这里为了不产生变形,得在加载之后,给图片增加样式 height: auto; 防止变形。这里是使用增加class的方法,同时将fadeIn的效果用CSS3的形式加入(js插件本身支持动画,但是CSS3动画性能更好)。代码如下:

autoheight的样式为

效果图

lazyload-pc

移动端

在移动端中,文章图片的尺寸往往大于屏幕宽度,图片加载完成后会发生抖动。

lazyload-mo

在图片加载之前,得对图片设置宽高,而图片的宽高得根据不同设备的分辨率来处理,JS处理代码如下:

效果图

lazyload-mobile

67/470
69/470

相关阅读

文章评论

  • 楼主能否整理一个demo?

  • 楼主写的还是非常好

  • 写的挺乱的。。

    • 哈哈,反正是为了解决具体问题自己总结的经验教训,有收获就行了。

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子