- 微信扫码关注公众号 :前端前端大前端,追求更精致的阅读体验 ,一起来学习啊
- 关注后发送关键资料,免费获取一整套前端系统学习资料和老男孩python系列课程
desc
在实际业务开发中,我们常会遇到条件渲染的问题,比如图片。当目标图片存在,则显示目标图片,不存在则显示默认的占位图片。如果在服务端(比如nodejs)很好实现,fs模块的
existsSync
方法就可以解决,但是前端,需要手动写一些逻辑判断
实现原理
在html标签中,具有src属性的标签在给其赋值时,会立刻发起一次异步请求,而且支持跨域。比如script标签,img标签,前者是jsonp的关键,后者是图片懒加载的关键。对img标签而言,例用src设置后的异步请求和onload,onerror可以检测资源是否存在。
code
checkImgExist接收三个参数,目标路径,成功回调和失败回调。onload,onerror 请求都是异步操作,必须通过回调函数处理其他逻辑
function checkImgExist(src, successCallback, errorCallback) {
var img = new Image()
img.src = src
img.onload = function () {
successCallback(src);
}
img.onerror = function () {
errorCallback(defaultImg);
}
}
function successCallback(src) {
console.log("图片存在")
}
function errorCallback() {
console.log("图片不存在")
}