MENU

摄影专题总结

• May 6, 2018 • Read: 179 • Code

摄影专题主要是摄影展,图片比较多。

我首先想到的是预加载,但是后来再看其实没有多大的作用。预加载是鼠标停留在超链接上时加载,这个时间很短,对于一般的文章类肯定是秒开的,一般的页面只有几百kb。但是对于那种图片的那种,特别是摄影类,图片质量很好的,显然不管用。

所以我用了阿里的OSS对象存储,从云对象存储上加载能节约不少的带宽。同时将图片设置成两种格式,在专题页上显示的时候用的固定宽275高自适应存储为webp格式。第一次用这种格式,发现网页的确加载快了不少,基本稳定在0.4秒左右。

后来发现还是有问题:

1、iOS 原生不支持 WebP

2、Safari、Firefox、Edge 等浏览器不支持 WebP

解决方法:

1、第一种太高大上了看不懂,又拍云有篇文章介绍了这个--链接

2、对于第二个问题:解决方法是用 JS 判断用户的浏览器,根据浏览器类型,决定是否把图片转成 WebP。如果用户浏览器是 Chrome,Chrome 支持 WebP,可以在 URL 后带上 !/format/webp,使用 WebP 图片;如果用户浏览器是 Safari,Safari 不支持 WebP,URL 后不加 !/format/webp,使用原生图片。

一行JavaScript代码判断浏览器是否支持webP:

!![].map主要是判断是否是IE9+,以免toDataURL方法会挂掉。如果你直接对数组原型扩展了map方法,则需要使用!![].map以外的方法进行判断,例如!!window.addEventListener等。

var isSupportWebp = !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;
console.log(isSupportWebp);   // true or false

解决第二个问题还有一种方法就是用WebPJS插件了

在<body></body>之间插入如下代码,即可使用WebP了

<script type="text/javascript" src="WebP.js"></script>

插件将会捕捉页面中使用WebP格式的img元素,并用Flash进行替换。图像的解码及显示都在Flash中完成,因此目前版本对CSS设置的背景图片无效。当然,作为JPEG格式的替换,只有对较大的图像使用才有意义,否则过多的解码将消耗大量的资源。

最后还遇到了一个问题,就是在浏览器回退的时候,自适应出了问题。看了半天,没看懂不知道为什么。我的思路是,让浏览器回退的时候自动刷新或者禁止浏览器回退再或者禁止浏览器缓存(也就是每次都要加载了)。第二种会影响用户的体验,第三种的话可能会影响预加载。所以只能让浏览器回退的时候自动刷新了。

1、在页面中增加隐藏域  <input type="hidden" id="refreshed" value="no"> 

2、通过js设置和获取隐藏域值来自动刷新页面

$(function(){
    var e=$("#refreshed");
    if(e.val()=="no") {
        e.val('yes');
    }else{
        e.val('no');
     location.reload();
    }
});

突然发现以后写博客不用怎么找特色图片了 :huaji6:

Leave a Comment

2 Comments
  1. J J

    直接用摄影展的图片吗?

    1. @J嗯嗯,拍的炒鸡好 :huaji: