分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

js 判断图片加载完成

发布时间:2023-09-06 01:35责任编辑:蔡小小关键词:js
// HTML<img id=‘xiu‘ src="http://www.daqianduan.com/wp-content/uploads/2014/11/hs-xiu.jpg"> ?//js $(document).ready(function(){ ???//jquery ???$(‘#xiu‘).load(function(){ ??????// 加载完成 ????}); ??//原生 ?onload ???var xiu = document.getElementById(‘xiu‘) ???xiu.onload = xiu.onreadystatechange = function(){ ??????if(!this.readyState||this.readyState==‘loaded‘||this.readyState==‘complete‘){ ??????????// 加载完成 ???????} ???};})

1、IE8及以下版本不支持onload事件,但支持onreadystatechange事件;
2、readyState是onreadystatechange事件的一个状态,值为loaded或complete的时候,表示已经加载完毕。

多张图片

var img = [], ?????flag = 0, ????mulitImg = [ ???‘http://www.daqianduan.com/wp-content/uploads/2017/03/IMG_0119.jpg‘, ???‘http://www.daqianduan.com/wp-content/uploads/2017/01/1.jpg‘, ???‘http://www.daqianduan.com/wp-content/uploads/2015/11/jquery.jpg‘, ???‘http://www.daqianduan.com/wp-content/uploads/2015/10/maid.jpg‘ ]; var imgTotal = mulitImg.length; for(var i = 0 ; i < imgTotal ; i++){ ???img[i] = new Image() ???img[i].src = mulitImg[i] ???img[i].onload = function(){ ??????//第i张图片加载完成 ??????flag++ ??????if( flag == imgTotal ){ ?????????//全部加载完成 ??????} ???} }

js 判断图片加载完成

原文地址:https://www.cnblogs.com/chaser-li/p/8266842.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved