文档章节

Javascript判断图片加载是否成功的方法

放开那个女孩
 放开那个女孩
发布于 2017/10/17 15:25
字数 300
阅读 39
收藏 0

在做页面的时候,经常碰到要在页面加载完全之后再去展现。这时候我们会直接想到使用window.onload的方式,或者是采用Jquery的ready方法判断,这在一定程度可以搞定。

window.onload方式

  

Jquery的ready方法

 

但是上面的方法只能判断Dom的加载状态,不能判断图片是否加载成功。如果碰到页面需要图片加载完成才能展现的情况,我们就无法搞定了。现提供两种方式判断图片是否加载完成。

使用onload的图片加载事件检测

这里是使用onload和onerror检测判断,但是有时候不能检测到图片是否加载完成,再使用过程中,我发现它只是判断所有图片开始加载时就触发了,不过基本可以满足需求。

使用complete的图片属性检测

这里我们采用定时器不断检测图片的complete属性,这个比较完美,只有图片确实加载完成时,才会变成真,所以比较可靠,建议采用。

本文转载自:http://jingyan.baidu.com/article/63acb44a376f5961fcc17ef0.html

放开那个女孩
粉丝 4
博文 112
码字总数 43124
作品 0
杭州
程序员
私信 提问
爬虫获取 js 动态数据 (1)

爬虫遇到 js 动态数据时,主要解决方法有两种: 使用一些库,例如 Selenium,来模拟浏览器环境抓取数据。但这样做对内存和 CPU 的消耗都比较大,爬虫效率低,应尽量避免。 手动分析 js 请求,...

anye137
2018/06/05
0
0
javascript创建css、js,onload触发callback兼容主流浏览器的实现

由于需要写个函数,既可以加载css,又可以加载js,所以对各主流浏览器对加载js、css后是否触发onload事件做了个测试。当然,为了兼容,首先要考虑的是会用到onload和onreadystatechange,但他...

bosscheng
2015/10/26
0
0
JS与OC-WebView交互总结

OC与JS交互有两种方式,WKWebView和UIWebView,由于UIWebView比较耗内存,性能上不太好,所以苹果在iOS 8中推出了WKWebView。 一、与UIWebView交互 在UIWebView与JS交互中最简单的办法就是拦截...

乔兰伊雪
2018/05/29
0
0
vue-lazyload源码分析

vue-lazyload源码分析 项目构建的配置文件 从package.json中的script命令脚本了解项目构建的配置文件是build.js。vue-lazyload库是通过rollup构建的,其中的input属性值为源码入口。 源码入口...

小草先森
02/10
0
0
使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效

日期:2012-3-26 来源:GBin1.com 在线演示 本地下载 360度的全景图片效果常常可以用到给客户做产品展示,今天这里我们推荐一个非常不错的来自Robert Pataki的360全景幻灯实现教程,这里教程...

gbin1
2012/03/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

springboot配置百度UEditor 富文本详解

富文本简介 UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码... 准备工作 ueditor需要单独文...

wotrd
6分钟前
0
0
mysql 5.7之my.cnf配置大全

[client]port = 3306socket = /tmp/mysql.sock[mysqld]###############################基础设置######################################Mysql服务的唯一编号 每个mysql服务...

Online_Reus
35分钟前
2
0
MAVEN打包时引入外部链接的包

1.项目引入了ORACLE的jar包,MAVEN配置如下 2.打jar包的时候需要指定下main入口函数mainClass <dependency> <groupId>com.oracle</groupId> <artifactId>ojdbc6</artifactId> ......

Cobbage
45分钟前
1
0
rror: Default interface methods are only supported starting with Android N (--min-api 24): java.io.

项目运行的时候,如果报错 Error: Default interface methods are only supported starting with Android N (--min-api 24): java.io.InputStream org.apache.poi.sl.usermodel.ObjectShape.......

chenhongjiang
58分钟前
2
0
聊聊spring cloud openfeign的Targeter

序 本文主要研究一下spring cloud openfeign的Targeter Targeter spring-cloud-openfeign-core-2.2.0.M1-sources.jar!/org/springframework/cloud/openfeign/Targeter.java interface Targe......

go4it
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部