HTML DOM complete 属性

定义和用法:

complete 属性可返回浏览器是否已完成对图像的加载。

如果加载完成,则返回 true,否则返回 fasle。

语法:

imageObject.complete

Image onload 事件

定义和用法:

onload 事件在图片加载完成后立即执行。

语法

onload="JavaScriptCode"

complete只是HTMLImageElement对象的一个属性,而onload则是这个Image对象的load事件回调,前者不能准确的在事件发生时进行异步回调并且在浏览器的兼容性上也有些问题。

这两者,只有img.complete可以判断图片加载完成,img.onload并不能判断图片是否加载完,而是在加载完毕之后,直接运行onload绑定的函数。

img加载完成就会解除onload事件,src是异步加载图片的,如果在绑定事件前就已经加载完成,onload事件不会触发。img.complete是一直都有的属性,加载完成后为true。

img.onload是当一张图片被加载完成后所触发的事件
实现图片显示功能;
<div>
<img id="img"/>
</div>

js部分:img.src="图片";
img.onload=showImg;
function showImg(){
   代码部分。。。。

}

对于 complete 属性来讲,IE是根据图片是否显示过来判断,就是说当加载的图片显示出来后,complete 属性的值才为 true ,否则一直是 false ,和以前是否加载过该张图片没有关系,即和缓存没有关系!这里要注意,显示与否和img.style.display无关;

JS部分: alert(img.complete);----->false
img.src="图片";
alert(img.complete);------->//如果上面“图片”获取的时间比JS代码顺序执行的时间要长,那么这里就是false,否则就是true。

下面看一个例子:
<input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" />
<script type="text/javascript">
    function addImg(isrc){
        var Img = new Image();
        Img.src = isrc;
        Img.onload = function () {
              document.body.appendChild(Img);
        }
    }
</script>

当页面打开后,点击按钮后,会显示tt.jpg,但是如果重复点击会怎样呢?在IE中,除了第一次加载 图片时候显示正常,之后再点击就没有反应了,刷新也一样。FF中,每点击一次加载一张该图片。而这是什么原因呢?是因为在IE中只执行了一次onload或者是缓存的问题吗?先改写一下代码,

<input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" />
<script type="text/javascript">
    function addImg(isrc){
        var Img = new Image();
        Img.onload = function (){
              document.body.appendChild(Img);
        }
        Img.src = isrc;
    }
</script>

现在再点击图片,就正常了,由此可见不是因为IE没有触发onload事件,而是因为IE中加载缓冲区的速度太快,以至于没有运行到img.onload的时候,图片已经被加载完毕了。因此,可以先告诉浏览器如何处理这张图片,然后再制定这张图片的来源。一般情况下,可以用complete来判断图片是否加载完毕。对于 complete 属性来讲,IE是根据图片是否显示过来判断,就是说当加载的图片显示出来后,complete 属性的值才为true ,否则一直是false ,和以前是否加载过该张图片没有关系,即和缓存没有关系!可以写如下的函数来做到各个浏览器中预加载图片的兼容性。

var imgLoad = function (url) {
    var img = new Image();
    img.src = url;
    if (img.complete) {
        callback(img.width, img.height);
    } else {
        img.onload = function () {
            callback(img.width, img.height);
            img.onload = null;
        };
    };
};

img的complete和onload的更多相关文章

  1. WEB界面onload前的加载流程❤❤

    开始的流程: 1.先发请求给DNS进行域名解析获取服务器IP 2.向步骤1获取的服务器IP发送HTTP请求 //服务器的内部处理 3.服务器接收请求后,解析主机头对应的站点,把请求传送给站点 //返回 ...

  2. javascript创建css、js,onload触发callback兼容主流浏览器的实现

    http://www.fantxi.com/blog/archives/load-css-js-callback/ 由于需要写个函数,既可以加载css,又可以加载js,所以对各主流浏览器对加载js.c ...

  3. JS魔法堂:IMG元素加载行为详解

    一.前言 在<JS魔法堂:jsDeferred源码剖析>中我们了解到img元素加载失败可以作为函数异步执行的优化方案,本文打算对img元素的加载行为进行更深入的探讨. 二.资源加载的相关属 ...

  4. JS快速获取图片宽高的方法

    快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...

  5. 通过url获取图片尺寸的几种方法:JS和php

    首先是js的方法,通过new一个Image对象,设置src属性,并监听complete和onload事件,图片加载完成后输出图片的宽度和高度 function checkPicurl(url){ va ...

  6. Egret官方案例学习笔记

    1.资源记载方式 (1)Egret引擎是2.0.5. (2)resource/resource.json文件是: { "resources": [ { "name&quo ...

  7. 常用js,css文件统一加载方法,并在加载之后调用回调函数

    原创内容,转载请注明出处! 为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在“sourceControl ...

  8. JS 动态加载脚本 执行回调_转

    关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件里面的函数是不会成功的.本文讲解 ...

  9. 转载:JS快速获取图片宽高的方法

    快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...

随机推荐

  1. Again Prime? No Time.(uva10870+数论)

    Again Prime? No time.Input: standard inputOutput: standard outputTime Limit: 1 second The problem st ...

  2. Docker 系列二(操作镜像).

    一.镜像管理 1.拉取镜像 docker pull [选项] [Docker Registry 地址[:端口号]/]仓库名[:标签] -- Docker 镜像仓库地址 :一般是 域名或者IP[:端口号 ...

  3. java安全管理器SecurityManager介绍

    java安全管理器类SecurityManager简单剖析: javadoc介绍: SecurityManager是一个允许应用实现一种安全策略的类.它允许一个应用去明确,在执行一个可能安全或者敏感的 ...

  4. MyBatis中映射器Mapper概述

    MyBatis真正强大之处在于它的映射器.因为它异常强大并且编写相对简单,不仅比传统编写SQL语句做的更好并且能节省将近95%的代码量 XML中顶级元素汇总 cache: 给定命名空间的缓存配置 ca ...

  5. virtualbox中设置u盘启动

    1.在磁盘管理中查看u盘的磁盘号X 2.管理员运行cmd,进入virtualbox目录 3.运行命令: VBoxManage internalcommands createrawvmdk -filen ...

  6. HDU6187(对偶图生成树)

    Destroy Walls Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 132768/132768 K (Java/Others)T ...

  7. cf55D. Beautiful numbers(数位dp)

    题意 题目链接 Sol 看到这种题就不难想到是数位dp了. 一个很显然的性质是一个数若能整除所有位数上的数,则一定能整除他们的lcm. 根据这个条件我们不难看出我们只需要记录每个数对所有数的lcm(也 ...

  8. 浅谈Kotlin(二):基本类型、基本语法、代码风格

    浅谈Kotlin(一):简介及Android Studio中配置 浅谈Kotlin(二):基本类型.基本语法.代码风格 浅谈Kotlin(三):类 浅谈Kotlin(四):控制流 通过上面的文章,在A ...

  9. seajs的原理以及基本使用

    seajs模块化开发 模块化开发,把整个文件分割成一个一个小文件. 使用方法 使用方法特别简单,首先在官网中下载sea.js,然后在页面中引入. index.html // 1.路径 // 2.回调 ...

  10. [转] Scala 中的异步事件处理

    在任何并发性应用程序中,异步事件处理都至关重要.无论事件的来源是什么(不同的计算任务.I/O 操作或与外部系统的交互),您的代码都必须跟踪事件,协调为响应它们而执行的操作.应用程序可以采用两种基本方法 ...