Next 主题背景图片,使用 unsplash.com 随机图片

技术文章请注意时效!原理才是根本。

unsplash.com提供随机图片,都非常漂亮,用来作为网页背景图很合适。source.unsplash.com提供了很多访问随机图片的方式,比如从user, user’s likes, collection, search term中提供随机图片。我是自己创建了一个collection,从中获取随机图片,作为页面背景图。

背景图css:

问题出现了,每刷新一次页面,从https://source.unsplash.com/collection/collectionid/2000×1000 返回的图片就换成了新的,图片又比较大,页面加载缓慢。所以想每过几分钟,才切换图片。

定时切换图片

由于图片服务器不在自己手里,所以只能js了。基本思路是,刷新页面,查看localStorage中保存的时间戳,和现在的时间差,超过固定时间,就去unsplash.com下载新的图片。不用cookie的原因是cookie每次都会传回服务器,对于这个功能并不合适。

https://source.unsplash.com/collection/collectionid/2000×1000 返回302和location,进行了重定向,返回的location是一个图片的地址,比如:https://images.unsplash.com/photo-1547578273-12d07a9d0b19?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=1000&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=2000

需要得到302的location,ajax无法办到,即使ajax发出HEAD请求。浏览器重定向之后,才去处理ajax回调,这个302对ajax是透明的。执行流程:ajax –> browser –> server –> 302 –> browser(redirect) –> server –> browser –> ajax callback。不过还是有办法的,原始的XMLHttpRequest可以得到302重定向的url

把下面的代码放到body-end.swig的script标签中即可。

加入缓存

上面的代码能做到每隔5分钟,再次刷新页面才会切换背景。可是切换背景仍然需要从source.unsplash.com加载。如果加入缓存,到了切换背景的时候,背景图片已经缓存下来,那就不会有从source.unsplash.com加载图片时间了,页面刷新速度就会很快了。

同时,修改页面背景css,即使第一次加载背景,或者缓存过期,背景也比较美观。

发表评论

电子邮件地址不会被公开。 必填项已用*标注