首页 > 其他分享 >jquery中判断图片是否存在的实现代码

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

时间:2024-09-26 13:22:26浏览次数:10  
标签:jquery src false img function 代码 加载 图片

有时候我们需要判断当前的图片是否存在,方便后期做一些操作,当然也可以参考上一篇文章,如果不存在就替换位默认图片

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,src,false,img,function,代码,加载,图片
From: https://blog.51cto.com/u_17002734/12118424

相关文章

  • 短视频矩阵系统源代码开发技术方案分享
    开发一个短视频矩阵系统的源码可以按照以下技术方案进行:前端开发:使用HTML5、CSS3和JavaScript技术开发前端界面。可以采用Vue.js或React等流行的前端框架来实现页面展示和用户交互功能。后端开发:采用Java或Python等编程语言作为后端开发语言,使用SpringBoot或Django等框架......
  • 一次基于AST的大规模代码迁移实践
    作者:来自vivo互联网大前端团队-WeiXing在研发项目过程中,我们经常会遇到技术架构迭代更新的需求,通过技术的迭代更新,让项目从新的技术特性中受益,但由于很多新的技术迭代版本并不能完全向下兼容,包含了很多非兼容性的改变(BreakingChanges),因此我们需要设计一款工具,帮助我们完成大规......
  • 如何写出让同事无法维护的代码
    一、程序命名容易输入的变量名。比如:Fred,asdf单字母的变量名。比如:a,b,c,x,y,z(如果不够用,可以考虑a1,a2,a3,a4,….)有创意地拼写错误。比如:SetPintleOpening,SetPintalClosing。这样可以让人很难搜索代码。抽象。比如:ProcessData,DoIt,GetData…抽象到就跟什么都没说一样。缩写......
  • 一次基于AST的大规模代码迁移实践
    作者:来自vivo互联网大前端团队-WeiXing在研发项目过程中,我们经常会遇到技术架构迭代更新的需求,通过技术的迭代更新,让项目从新的技术特性中受益,但由于很多新的技术迭代版本并不能完全向下兼容,包含了很多非兼容性的改变(BreakingChanges),因此我们需要设计一款工具,帮助我们完成......
  • PyQt5 使用 QLabel 实现对图片圆角或者圆形图片
    PyQt5使用QLabel实现对图片圆角或者圆形图片本文圆角实现代码,是基于Qt处理图片:设置图片圆角样式,支持全圆角和部分圆角这篇文章将C++用Python重写得到,感谢!!实现方法就是使用QPainter与QPainterPath,将原QPixmap对象,先裁剪出一个圆角QPixmap对象并返回,最后通过QLabel的setPixmap......
  • 揭秘 Git-stash:掌握暂存技巧,让代码更整洁!
    stash可以冻结目前的状态‍在gitstash出现之前当我们在开发一个新功能的时候,突然来了一个紧急的bug要修复,此时我们可以创建一个分支去修复它;但如果,切换会导致冲突的话,就会切换失败。我们来模拟下(先确保工作区是干净的):$gitbranchbug02$echo"test">>3-branch/br......
  • Git 分支管理全攻略:一篇博客带你玩转代码分支!
    什么是分支?在Git里,分支其实就有点像一个树的枝杈,每个分支上可以有不同的文件的版本,并且不会互相干扰。​分支功能有什么用?在工作中,我们经常是需要和别人一起开发一个项目的,此时可能你开发A功能,别人开发B功能;如果只有一个分支的话,那么所有人都得在这个分支上干活;如果你开发......
  • 一键去水印小程序源码系统 下载无水印的高清图片 带完整的安装代码包以及搭建部署教程
    系统概述一键去水印小程序源码系统是一款专为图片去水印设计的软件开发包(SDK),它集成了先进的图像处理技术和智能识别算法,能够自动识别并去除图片中的水印,同时保持图片的高清画质不受损。该系统支持多种图片格式,包括但不限于JPEG、PNG、GIF等,广泛适用于电商、设计、教育、自媒体......
  • 家庭医生上门服务小程序源码系统 带完整的安装代码包以及搭建部署教程
    系统概述家庭医生上门服务小程序源码系统是一款专为医疗机构、健康服务平台及有意愿涉足健康服务领域的创业者设计的一站式解决方案。该系统集成了预约挂号、在线问诊、健康档案管理、药品配送、健康资讯推送等多种功能于一体,旨在通过移动互联网技术,打破传统医疗服务的时空限......
  • 微信支付开发-支付工厂AppApi查账代码
    一、JSAPI支付产品、APP支付产品、小程序支付产品流程图二、工厂父类抽象类代码开发<?php/***微信父类抽象类*User:龙哥·三年风水*Date:2024/9/19*Time:11:33*/namespacePayment\WechatPay;abstractclassWechatPaymentHandle{/***下单......