七牛云存储对于网站来说却是是一个不错的产品，可以将网站的图片、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>
|
