`
单刀刑天
  • 浏览: 40283 次
文章分类
社区版块
存档分类
最新评论

js 的 new image()

阅读更多

创建一个Image对象:var a=new Image();    定义Image对象的src: a.src=”xxx.gif”;    这样做就相当于给浏览器缓存了一张图片。

 

图像对象:

建立图像对象:图像对象名称=new Image([宽度],[高度])

图像对象的属性: border complete height hspace lowsrc name src vspace width

图像对象的事件:onabort onerror onkeydown onkeypress onkeyup onload

需要注意的是:src 属性一定要写到 onload 的后面,否则程序在 IE 中会出错。

 

var img=new Image();
img.onload=function(){alert("img is loaded")};
img.onerror=function(){alert("error!")};
img.src="http://www.abaonet.com/img.gif";
function show(){alert("body is loaded");};
window.onload=show;

 

      运行上面的代码后,在不同的浏览器中进行测试,发现 IE 和 FF 是有区别的,在 FF 中,img 对象的加载包含在 body 

的加载过程中,既是 img加载完之后,body 才算是加载完毕,触发 window.onload 事件。

      在 IE 中,img 对象的加载是不包含在 body 的加载过程之中的,body 加载完毕,window.onload 事件触发时,img

对象可能还未加载结束,img.onload事件会在 window.onload 之后触发。

      根据上面的问题,考虑到浏览器的兼容性和网页的加载时间,尽量不要在 Image 对象里放置过多的图片,否则在 FF 下

会影响网页的下载速度。当然如果你在 window.onload 之后,执行预加载函数,就不会有 FF 中的问题了。

      可以通过Image对象的complete 属性来检测图像是否加载完成(每个Image对象都有一个complete属性,当图像处于

装载过程中时,该属性值false,当发生了onload、onerror、onabort中任何一个事件后,则表示图像装载过程结束(不管成

没成功),此时complete属性为true)

 

var img = new Image();  
img.src = oImg[0].src = this.src.replace(/small/,"big");  
oDiv.style.display = "block";  
img.complete ? oDiv.style.display = "none" : (oImg[0].onload = function() {oDiv.style.display = "none"})  

 注:

ie 火狐等大众浏览器均支持 Image对象的onload事件。

ie8及以下、opera 不支持onerror事件

分享到:
评论

相关推荐

    js的image onload事件使用遇到的问题

    标题中所提到的知识点是“js的image onload事件使用遇到的问题”,这涉及到JavaScript中Image对象的onload事件处理。在Web前端开发中,onload事件是一个非常重要的概念,主要用于处理图片或者其他资源加载完成后的...

    Javascript for Image process

    1. 加载图片:使用`new Image()`创建一个图片对象,设置其`src`属性为图片URL,然后在其`onload`事件中处理图片。 2. 绘制图片:在Canvas上使用`drawImage()`方法绘制图片,可以指定绘制的区域和位置。 3. 用户交互...

    uniapp editor富文本 quill.min.js image-resize.min.js

    总的来说,"uniapp editor富文本 quill.min.js image-resize.min.js"涉及到的知识点主要包括uniapp框架的使用、Quill富文本编辑器的集成与定制、JavaScript图像处理以及富文本数据的管理和交互。这些技术的结合,...

    JavaScript获取图片的原始尺寸以宽度为例

    var image = new Image(); image.src = img.src; return image.width; } ``` 4. **HTML5的`naturalWidth`和`naturalHeight`属性**: - 自HTML5开始,浏览器提供了`naturalWidth`和`naturalHeight`属性,可以...

    用new Image()预先加载图片真的有用吗?

    ### 使用`new Image()`进行图片预加载的有效性探讨 #### 引言 在网页开发过程中,为了提升用户体验,开发者常常需要处理图片加载的问题。一种常见的技术是使用`new Image()`来预加载图片,以减少用户等待时间。然而...

    js 改变背景(backgroundImage)和 类名称(class)

    在JavaScript中,改变元素的背景图像(backgroundImage)和类名称(class)是常见的操作,这对于动态更新网页的样式和交互性至关重要。本文将详细探讨这两个主题,并提供实用的代码示例。 首先,我们来讨论如何使用...

    Image中显示动态图片Gif

    但在一些高级应用中,如JavaScript库或框架(如React、Vue),可能需要使用`canvas`元素或者第三方库(如`react-gif-player`、`vue-gif-component`)来更好地控制GIF的播放。 在iOS开发中,我们可以使用`UIImage`类...

    image-resize-js:客户端图像调整大小

    `image-resize-js`是一个专门针对这个需求的JavaScript库,它允许用户在浏览器端进行图像的实时调整大小,无需将原始图像上传到服务器,从而提高了用户体验并减少了服务器的负担。本文将详细介绍这个库的使用方法、...

    html2image 0.9.jar 和 2.0.1.rar

    Html2Image html2Image = new Html2Image(); html2Image.saveImage("http://example.com", "output.png"); ``` 随着技术的发展,2.0.1版本可能会包含一些改进和新特性。这可能包括更好的CSS3支持、JavaScript执行...

    imagecompressor一个简单的JavaScript图像压缩器

    var compressor = new ImageCompressor(imageElementOrFile); ``` 3. 设置参数:可设置压缩质量、最大宽度和高度等参数,以控制压缩效果。 ```javascript compressor.compress({ quality: 0.8, // 压缩质量,取值...

    js中Image对象以及对其预加载处理示例

    不显示在文档中的 Image 对象 对于不显示在文档中的 Image 对象时用 var 语句定义的: 代码如下: var myImage = new Image();或 var myImage = new Image(<图片地址字符串>); 然后就可以像一般 Image 对象一样...

    js关于getImageData跨域问题的解决方法

    <img src="your-image-url" crossorigin="anonymous"> ``` 3. **服务器端设置CORS**: 如果你控制着服务器,可以在服务器端设置适当的CORS头,允许浏览器从不同源加载资源。对于图片,你需要在返回图片的HTTP...

    image-compressor:用于调整图像大小和压缩图像的前端javascript模块

    图像压缩器用于调整图像大小和压缩图像的前端javascript模块。 不需要后端库。2.0版发布了!现在可以import { ImageCompressor } from 'image-compressor';作为简单的import { ImageCompressor } from 'image-...

    javascript 利用Image对象实现的埋点(某处的点击数)统计

    `jQuery`简化了DOM操作,如创建新元素(`$(new Image())`)、绑定事件处理函数(`.bind()`和`.unbind()`)、以及获取和设置元素数据(`.data()`)。 ### 7. 性能考虑 尽管这种方法可以有效地异步发送埋点数据,但...

    C#+存取SqlServer中的Image类型

    SqlCommand insertCommand = new SqlCommand("INSERT INTO TableName (ImageColumn) VALUES (@Image)", connection); insertCommand.Parameters.AddWithValue("@Image", new SqlBinary(imageData)); insertCommand....

    Viewer.js v1.10.4

    在JavaScript的开发领域, Viewer.js 使用了ECMAScript(ES)规范,这是一套定义了JavaScript语法和语义的标准,确保代码在不同浏览器或环境中的一致性。这个库特别适合那些希望在网页上提供高级图片浏览体验的...

    前端开源库-img-diff-js

    `img-diff-js`就是一个专为这种需求设计的JavaScript库,它使得在浏览器环境中轻松对比两张图片成为可能。 **一、库的核心功能** `img-diff-js`库的主要任务是计算两个图像之间的像素级差异,并以可视化的方式展示...

    openlayers使用imageCanvas加载矢量元素

    var source = new ol.source.ImageCanvas({ extent: extent, createCanvasFunction: function(extent) { var canvas = document.createElement('canvas'); // 在这里根据extent获取并绘制矢量数据 return ...

    js获取 input file 图片立即显示

    "js获取input file 图片立即显示"这个话题就是关于如何利用JavaScript来实现在用户选择图片后即时预览的功能。以下是一个详尽的步骤解释和相关知识点: 1. **HTML 结构**: 首先,我们需要在HTML页面中创建一个`...

Global site tag (gtag.js) - Google Analytics