JS代码实现网站图片镜像七牛云存储加速网站速度!

发布时间:2021-01-12 作者:安阳博客网 所属分类:程序代码

七牛云存储对于网站来说却是是一个不错的产品,可以将网站的图片、JS、CSS镜像到七牛云存储上从而加速网站速度,对于一些主流CMS而言,都为其开发了专门的七牛云存储插件,而那些小众的CMS站点想要轻松使用七牛云存储就显得比较费力,不过还好我们可以用JS代码来实现网站图片镜像七牛云存储的功能,从而加速网站速度!

原理很简单,就是将网站图片放置在一个容器当中并给定其一个ID或是Class类属性,而后通过JS来改写图片网址为七牛云设置的加速域名,从而实现远端拉取对应的图片到七牛云存储,从而实现网站图片镜像七牛云存储加速网站速度,下面来看代码.

HTML代码

<div id="showbox">
<img src="/uploads/1.jpg">
</div>

JS代码

<script type="text/javascript">
var imglist=document.getElementById("showbox").getElementsByTagName("img");
for(var i=imglist.length-1;i>=0;i--){
	imglist[i].src="http://七牛加速域名"+imglist[i].getAttribute('src');
};
</script>

那么如果图片是一个绝对网址该怎样办呢,以下JS代码对主网址做一替换即可.

<script type="text/javascript">
function changeSrc(elem,oldSite,newSite){
var imglist = document.querySelector(elem).querySelectorAll("img");
for (let i = 0; i < imglist.length; i++) {
imglist[i].src = imglist[i].getAttribute('src').replace(oldSite, newSite);
};
}
changeSrc('#showbox','http://源网址','http://七牛云加速域名');
</script>