new Image()的用途

简介: new Image()用途总结:   1、图片预加载      在做游戏时,为了使图片能快打开可以做预加载。      原理:创建image对象,将image对象的src分别指向需加载的图片地址,图片被请求,因为Image对象没有显示在页面上,所以不会对页面布局产生影响。

new Image()用途总结:

 

1、图片预加载

     在做游戏时,为了使图片能快打开可以做预加载。
     原理:创建image对象,将image对象的src分别指向需加载的图片地址,图片被请求,因为Image对象没有显示在页面上,所以不会对页面布局产生影响。   
 
   

var arr=['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'];

var img=new Image();

var n=0
img.src=arr[n];
img.onload=function(){
  n++;
  if(n<arr.length){
    img.src=arr[n];
  }
}

 
2、向服务器发送统计请求
 
     为了做点击量或访问量统计时,向服务器发送请求。
     原理:创建image对象,image对象的src为请求服务器的地址,当image对象请求图片资源时,服务发送成功。为了避免浏览器缓存导致的不发送请求,可在请求地址后加时间戳。
obj.onclick=function(){
          (new Image()).src="服务器地址"+"?_t="+new Date().getTime();
     }
 
3、创建image对象
 
      如果需要显示图片,一般会提前把结构写好吧。
var img = new Image();  img.src="1.jpg";
  document.getElementsByTagName('body')[0].appendChild(img);

 

 
  
 
 
目录
相关文章
|
8月前
|
前端开发
UniApp 中的 image 属性讲解
UniApp 中的 image 属性讲解
925 2
|
开发者
处理base64图片数据的方式
处理base64图片数据的方式
138 4
|
5月前
|
存储 容器
容器镜像解析问题之desc.Image() 方法确定返回的 Image 接口类型如何解决
容器镜像解析问题之desc.Image() 方法确定返回的 Image 接口类型如何解决
29 0
|
6月前
|
JavaScript
Base64如何切割后面的内容,如何提取data:image/png;base64,之后的内容,Vue中.split中截取的数组如何使用数组进行获取
Base64如何切割后面的内容,如何提取data:image/png;base64,之后的内容,Vue中.split中截取的数组如何使用数组进行获取
|
8月前
|
Python
image.save()方式支持的图片格式
python保存图片格式
269 0
|
计算机视觉 Python
python之jpg和png格式之间的转换
python之jpg和png格式之间的转换
118 0
|
Python
Python:data:image/png;base64图片编码解码
Python:data:image/png;base64图片编码解码
802 0
|
缓存 算法 Android开发
【Flutter】Image 组件 ( Image 组件简介 | Image 构造函数 | Image.network 构造函数 | Image.asset 构造函数 )
【Flutter】Image 组件 ( Image 组件简介 | Image 构造函数 | Image.network 构造函数 | Image.asset 构造函数 )
286 0
|
存储 JavaScript 前端开发
Image图片查找不存在时(九)
在实际的开发中,常常会遇到关于图片的问题。 如图片显示的问题,然而在显示图片的过程中,常常也会遇到一些问题,如图片不存在,图片引用的路径不匹配等。
334 0
|
程序员
好程序员分享该如何选择background-image和img标签
  好程序员分享该如何选择background-image和img标签,用img标签  如果你希望别人打印页面时候包含这张图片请使用img标签  当这张图片有非常有意义的语义,比如警告图标,请使用img标签及它的alt属性。
6819 0