前端爬坑日记-jquery的attr设置图片失效的问题

关于jQuery中attr设置图片地址在浏览器失效的问题

此篇文章借鉴了https://blog.csdn.net/wide288/article/details/19974917，感谢大佬提供的方法。
不久前自己有个需求，是鼠标经过时就替换图片，因为项目用到的jQuery，就想到用jQuery设置图片，而且jQuery也有处理兼容问题，一举两得。当我完成的时候去测试我发现懵了。不同电脑，同样的系统，显示的效果竟然完全不一样。要么图片404，要么要点一下才显示。百度回来也没找到什么好办法，推荐的都是jQuery。没办法我只能换方法。

因为笔者是鼠标经过时替换的，所以我直接用了css的hover：

.img {
  width:20px;
  height:20px;
  background:url(../images/img_nor.png) no-reoeat;
  background-size:cover;
}
.img:hover {
  background:url(../images/img_hor.png) no-reoeat;
  background-size:cover;
}

当然这种方法只能用于鼠标经过时，如果是要点击替换图片

document.getElementById(id).src="./images/img_hor.png";
//或
document.getElementById(id).setAttribute('src','./images/img_hor.png');

如果用原生图片也加载不出来的话，就把js改一下

//理由是每次的访问地址都不一样，因为有加随机数
document.getElementById(id).src="./images/img_hor.png" + Math.random();

到此为止这次分享的爬坑内容就结束了，本人也是自学的前端现在在实习，技术有限可能会有不足的地方希望大神能指点，最后希望能看到本篇文章的前端小伙伴早日成为巨佬，共勉！