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

不显示在文档中的 Image 对象

对于不显示在文档中的 Image 对象时用 var 语句定义的:


代码如下:

var myImage = new Image();或
var myImage = new Image(<图片地址字符串>);

然后就可以像一般 Image 对象一样对待 myImage 变量了。不过既然它不显示在文档中,以下属性:lowsrc, width, height, vspace, hspace, border 就没有什么用途了。一般这种对象只有一个用:预读图片(preload)。因为当对对象的 src 属性赋值的时候,整个文档的读取、JavaScript 的运行都暂停,让浏览器专心的读取图片。预读图片以后,浏览器的缓存里就有了图片的 Copy,到真正要把图片放到文档中的时候,图片就可以立刻显示了。现在的网页中经常会有一些图像连接,当鼠标指向它的时候,图像换成另外一幅图像,它们都是先预读图像的。

预读图像的 JavaScript 例子


代码如下:

var imagePreload = new Image();

imagePreload.src = '001.gif';
imagePreload.src = '002.gif';
imagePreload.src = '003.gif';

以上例子适合预读少量图片。


代码如下:

function imagePreload() {
var imgPreload = new Image();
for (i = 0; i < arguments.length; i++) {
imgPreload.src = arguments[i];
}
}

imagePreload('001.gif', '002.gif', '003.gif', '004.gif', '005.gif');

以上例子适合预读大量图片。

因为许多浏览器存在的缓存问题。当图片加载过一次之后,如果再有对该图片的请求时,由于浏览器已经缓存住这张图片了,不会再发起一次新的请求,而是直接请缓存中加载过来,经过分析,可以使用各个浏览器所兼容的Image的属性--complete。所以在图片onload事件之前先对这个值做下判断即可,如下例子:


代码如下:

function loadImage(url, callback) {
var img = new Image(); //创建一个Image对象,实现图片的预下载
img.src = url;

if (img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数
callback.call(img);
return; // 直接返回,不用再处理onload事件
}

img.onload = function () { //图片下载完毕时异步调用callback函数。
callback.call(img);//将回调函数的this替换为Image对象
};
};

(0)

相关推荐

  • 纯JS图片批量预加载技术代码

    图片批量加载 function $id(id){ return document.getElementById(id);} function $c(tagName){ return document.createElement(tagName);} window.onload = function(){ imageLoad( { url:function(v){ v = []; for(var i=1; i [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JS图片预加载插件详解

    在开发H5项目中有时候会遇到要加载大量图片的情况,利用预加载技术可以提高用户浏览时的体验. 1)概念: 懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 2)区别: 两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载.懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力. 服务器端区别:懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数.预加载可以说

  • js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)

    看个例子: 复制代码 代码如下: <input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" /> <script type="text/javascript"> <!-- function addImg(isrc) { var Img = new Image(); Img.src = isrc; I

  • js 利用image对象实现图片的预加载提高访问速度

    大量采用高解析度的图像的确可以让一个Web站点容光焕发.但同样也会造成站点访问速度下降--图片是文件,文件就要占用带宽,而带宽直接同访问等待时间相关.现在,让我们来学习一种名为图像预装载(image preloading)的小技巧来提高图像访问速度. 一些浏览器试图通过在本地缓存中保存这些图片来解决此问题.这样一来可以顺序调用这些图片--但对于首次使用这些图片的时候仍然会存在延时.预装载就是一种在需要图片之前就将图片下载到缓存的技术.采用这样的方式可以使当确实需要显示图片时迅速将其从缓存中恢复回

  • JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考虑流量的话,大可以像pconline一样每个页面只显示一张图片,让用户每看一张图片就需要重新下载一下整个页面.不过,在web2.0时代,更多人愿意用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片. 知道了一张图片的地址,需要把它在一个固定大小的html容器(可以是div等)里边显示出来,最重要的当然是需要知道这张即将显示的图片的宽和高,然后再结合容器的宽和高,按照一定的缩放比例使图片显示出来.因此,实

  • 浅析js预加载/延迟加载

    Pre loader 预加载一般有两种常用方式:xhr和动态插入节点的方式.动态插入节点是最为简单也最为广泛的一种异步加载方式,然后使用动态插入节点方法加载的文件都会 在加载后立即执行,javascript的执行一方面会占用浏览器js执行进程,另一方面也可能改变页面结构,而css 的执行更有可能让整个页面变化.xhr方式虽然不会执行脚本,但是由于同域的限制 Lazy loader方式在一些图片非常多的网站中非常有用,在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置才加载,这

  • javascript 也来玩玩图片预加载

    作者:编程浪子 最近玩图片预加载的人好像特别多,我也来一个,个人比较懒,只在IE上调试,大家就当无聊聊玩玩吧 IE图片预加载类 function LoadImageClass() { var me = this; var a = []; //图片数组 this.Idx = 0; //已经被加载的图片个数 this.Num = 0; //图片总数 //下载图片 this.LoadImages = function(s) { a = s.split(","); this.Num = a.l

  • 利用CSS、JavaScript及Ajax实现高效的图片预加载

    方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效. 单纯使用CSS,可容易.高效地预加载图片,代码如下: 复制代码 代码如下: #preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; } #preload-02 { background:

  • javascript预加载图片、css、js的方法示例介绍

    预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片.css.js这些静态文件可以被缓存),如果用户访问的页面里面的css.js.图片被预加载了,用户打开页面的速度会快很多,提升用户体验.在用到一些大图片展示的时候,预加载大图是很不错的方法,图片更快的被呈现给用户.不多说了,作为一个前端攻城师都懂的,下面分享我做的测试和得到的结果. 先说需要知道的服务器返回的status code:status-code: 200 - 客户端请求成功status-code: 304 -

  • javascript 事件加载与预加载

    通常来说,window.onload就够用了,如果想加载多个事件,我们可以采取以下方式: 复制代码 代码如下: window.onload = function(){ func1(); func2(); func3(); //更多加载事件------ } 但如果由于某种特殊需要,我们不能合在一起写吗?如当前区域是面向管理员,后台生成页面时只有当用户是管理员,页面才生成这部分,而这部分也用到一些特殊的脚本,上面的方法就歇菜了! 复制代码 代码如下: //后台代码 <script type="

随机推荐