创建一个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事件使用遇到的问题”,这涉及到JavaScript中Image对象的onload事件处理。在Web前端开发中,onload事件是一个非常重要的概念,主要用于处理图片或者其他资源加载完成后的...
1. 加载图片:使用`new Image()`创建一个图片对象,设置其`src`属性为图片URL,然后在其`onload`事件中处理图片。 2. 绘制图片:在Canvas上使用`drawImage()`方法绘制图片,可以指定绘制的区域和位置。 3. 用户交互...
总的来说,"uniapp editor富文本 quill.min.js image-resize.min.js"涉及到的知识点主要包括uniapp框架的使用、Quill富文本编辑器的集成与定制、JavaScript图像处理以及富文本数据的管理和交互。这些技术的结合,...
var image = new Image(); image.src = img.src; return image.width; } ``` 4. **HTML5的`naturalWidth`和`naturalHeight`属性**: - 自HTML5开始,浏览器提供了`naturalWidth`和`naturalHeight`属性,可以...
### 使用`new Image()`进行图片预加载的有效性探讨 #### 引言 在网页开发过程中,为了提升用户体验,开发者常常需要处理图片加载的问题。一种常见的技术是使用`new Image()`来预加载图片,以减少用户等待时间。然而...
在JavaScript中,改变元素的背景图像(backgroundImage)和类名称(class)是常见的操作,这对于动态更新网页的样式和交互性至关重要。本文将详细探讨这两个主题,并提供实用的代码示例。 首先,我们来讨论如何使用...
但在一些高级应用中,如JavaScript库或框架(如React、Vue),可能需要使用`canvas`元素或者第三方库(如`react-gif-player`、`vue-gif-component`)来更好地控制GIF的播放。 在iOS开发中,我们可以使用`UIImage`类...
`image-resize-js`是一个专门针对这个需求的JavaScript库,它允许用户在浏览器端进行图像的实时调整大小,无需将原始图像上传到服务器,从而提高了用户体验并减少了服务器的负担。本文将详细介绍这个库的使用方法、...
Html2Image html2Image = new Html2Image(); html2Image.saveImage("http://example.com", "output.png"); ``` 随着技术的发展,2.0.1版本可能会包含一些改进和新特性。这可能包括更好的CSS3支持、JavaScript执行...
var compressor = new ImageCompressor(imageElementOrFile); ``` 3. 设置参数:可设置压缩质量、最大宽度和高度等参数,以控制压缩效果。 ```javascript compressor.compress({ quality: 0.8, // 压缩质量,取值...
不显示在文档中的 Image 对象 对于不显示在文档中的 Image 对象时用 var 语句定义的: 代码如下: var myImage = new Image();或 var myImage = new Image(<图片地址字符串>); 然后就可以像一般 Image 对象一样...
<img src="your-image-url" crossorigin="anonymous"> ``` 3. **服务器端设置CORS**: 如果你控制着服务器,可以在服务器端设置适当的CORS头,允许浏览器从不同源加载资源。对于图片,你需要在返回图片的HTTP...
图像压缩器用于调整图像大小和压缩图像的前端javascript模块。 不需要后端库。2.0版发布了!现在可以import { ImageCompressor } from 'image-compressor';作为简单的import { ImageCompressor } from 'image-...
`jQuery`简化了DOM操作,如创建新元素(`$(new Image())`)、绑定事件处理函数(`.bind()`和`.unbind()`)、以及获取和设置元素数据(`.data()`)。 ### 7. 性能考虑 尽管这种方法可以有效地异步发送埋点数据,但...
SqlCommand insertCommand = new SqlCommand("INSERT INTO TableName (ImageColumn) VALUES (@Image)", connection); insertCommand.Parameters.AddWithValue("@Image", new SqlBinary(imageData)); insertCommand....
在JavaScript的开发领域, Viewer.js 使用了ECMAScript(ES)规范,这是一套定义了JavaScript语法和语义的标准,确保代码在不同浏览器或环境中的一致性。这个库特别适合那些希望在网页上提供高级图片浏览体验的...
`img-diff-js`就是一个专为这种需求设计的JavaScript库,它使得在浏览器环境中轻松对比两张图片成为可能。 **一、库的核心功能** `img-diff-js`库的主要任务是计算两个图像之间的像素级差异,并以可视化的方式展示...
var source = new ol.source.ImageCanvas({ extent: extent, createCanvasFunction: function(extent) { var canvas = document.createElement('canvas'); // 在这里根据extent获取并绘制矢量数据 return ...
"js获取input file 图片立即显示"这个话题就是关于如何利用JavaScript来实现在用户选择图片后即时预览的功能。以下是一个详尽的步骤解释和相关知识点: 1. **HTML 结构**: 首先,我们需要在HTML页面中创建一个`...