插件窝 干货文章 jquery中判断图片是否存在的实现代码

jquery中判断图片是否存在的实现代码

function src 图片 img 635    来源:    2024-10-11

在网上搜索了好长时间,有些都没有效果,后来终于实现了!需要的小伙伴们可以看下下面的代码,希望可以帮助你们~

function isHasImg( src ){
    var img = new Image();
    img.src = src;
    img.onload = function(){
        if( img.width > 0 || img.height > 0  ){
            onImgExistNotify(img.src,true,3);
        }
        else{
            onImgExistNotify(img.src,false,2);
        }
    } 
    img.onerror = function(){
        onImgExistNotify(img.src,false,1);
    }   
}
function onImgExistNotify(src,bExist,iPlace){//图片src是否存在通知
    if( bExist ){
        console.log("图片src="+src+"存在"+iPlace);
    }
    else{
        console.log("图片src="+src+"不存在"+iPlace);
    }
}

下面是其它网友的补充

利用图片没有加载完成的时候,宽高为0。我们很容易判断图片的一个加载情况。如下:

var t_img; // 定时器
var isLoad = true; // 控制变量
// 判断图片加载状况,加载完成后回调
isImgLoad(function(){
    // 加载完成
});
// 判断图片加载的函数
function isImgLoad(callback){
    // 注意我的图片类名都是cover,因为我只需要处理cover。其它图片可以不管。
    // 查找所有封面图,迭代处理
    $('.cover').each(function(){
        // 找到为0就将isLoad设为false,并退出each
        if(this.height === 0){
            isLoad = false;
            return false;
        }
    });
    // 为true,没有发现为0的。加载完毕
    if(isLoad){
        clearTimeout(t_img); // 清除定时器
        // 回调函数
        callback();
    // 为false,因为找到了没有加载完成的图,将调用定时器递归
    }else{
        isLoad = true;
        t_img = setTimeout(function(){
            isImgLoad(callback); // 递归扫描
        },500); // 我这里设置的是500毫秒就扫描一次,可以自己调整
    }
}

如果还是不满意,可以参考下面插件窝小编写的,不会死循环

function fixNDPic(){
var aimg=$(".xgcomm img");
    for(var i=0;i<aimg.length;i++){
        if(aimg[i].src.indexOf('img.jbzj.com')>-1){
        if(/do\/uploads\//.test(aimg[i].src)){
            aimg[i].onerror=function(){
                if (this.src.indexOf('img.jbzj.com')>-1){
this.src=this.src.replaceAll('img.jbzj.com','www.jb51.net');
                }
            }
        }
        }
    }
}
String.prototype.replaceAll = function(s1, s2) {
    return this.replace(new RegExp(s1, "gm"), s2);
}
fixNDPic()

到此这篇关于jquery中判断图片是否存在的实现代码的文章就介绍到这了,更多相关jquery判断图片是否存在内容请搜索插件窝以前的文章或继续浏览下面的相关文章希望大家以后多多支持插件窝!