一例WEB页面图片本地预加载实现

摘要:由于受客户端控件加载图片时间段影响,以及JS(JavaScript)的异步执行模式制约,往往对客户端控件所加载的图片进行处理,会出现图片未加载完,而JS处理代码已经开始执行的情况,此时会造成JS相关代码执行错误。该文就这种在WEB页面开发过程中常见的问题进行了详细分析,并在此基础上设计了相应解决方案,给出了部分关键代码。

关键词:预加载;异步执行;本地加载;浏览器缓存

中图分类号:TP311文献标识码:A文章编号:1009-3044(2010)05-1223-02

One Cases of WEB Page Picture of Local Pre-loaded to Achieve

HE Miao

(Nanjing College of Information Technology, Nanjing 210046, China)

Abstract: Due to client controls affect the time you load your images, and JS (JavaScript) of asynchronous execution mode constraints are often loaded on the client-side controls the image processing, there will be finished picture is not loaded, while the JS processing code the situation has already begun at this time would cause JS errors related to code execution. In this paper, the development process in the WEB page frequently asked questions are analyzed in detail, and on this basis to design the corresponding solution, and given some key code.

Key words: pre-load; asynchronous implementation; local load; browser cache

1 问题描述

在WEB项目开发中出现以下需求:网页能够提供给用户上传头像图片的功能,而该功能要求能够为用户在手头没有头像近照的情况下,可以提供对含有用户影象的生活照片进行头像剪截功能。

因此,我们设计让用户先在客户端本地将待处理图片(母图)打开显示,用JS提供给用户头像截取的大小、尺寸位置选择框,改框由JS实现成可以由用户在客户端按实际需求进行任意调整,当调整完毕确定后,WEB页面统一将母图与用户选择的截取区域的对角坐标与宽高上传至服务器,然后在服务器利用图形处理类库统一处理,当处理成功后,将截取的目标头像(子图)随页面回发给客户端,并在相应客户端控件中显示。整个设计处理流程如图1。

在以上过程中的动作(1)操作时,由于受图片控件容器加载速度影响,尤其是当加载大尺寸图片时,即使图片在客户端本地,也存在一个短暂的加载过程,而此时JS为后面图片截取进行的母图初始化过程(例如此处图片按照一定的缩放比例显示出来)已经开始执行,在这个执行过程中,需要母图的宽、高、大小等图片信息,但由于图片还没加载完毕,相应图片信息无法获取,因此导致JS为图片进行的初始化处理失败,表现为母图加载入HTML容器时异常显示,且初始化的截取矩形框显示不正常。

2 图片本地加载设计

根据问题原因分析,需要使用异步的方法为图片设置预加载,即只有当图片加载完毕后,再对图片获取基本信息,然后根据基本信息执行图片截取初始化JS代码。以下实现为.NET环境,服务器端代码为C#.NET。

2.1 设置浏览器缓存图片对象

为了预先加载图片后获取图片信息,可以先用JS创建Image对象,并预加载图片:

var tempimg = document.createElement("img");//设置全局Image对象

function preview(ImageUrl) {

tempimg.src = ImageUrl;

ImagePreLoad(); //检测图片有没加载完毕

}

2.2 判断预加载图片是否完成

由于预加载图片有一个过程,需要不断进行判断是否加载完毕,可以使用Image对象的readyState属性来判断,并用setTimeout进行递归判断,为防止递归过频,降低系统资源,因此设置setTimeout触发递归间隔时间为100ms。

function ImagePreLoad() {if (tempimg.readyState != "complete") {

setTimeout("ImagePreLoad(document.getElementById('tempImage'))", 100);

} else { previewComplete();//当加载完毕后开始图片处理初始化

}}

2.3 图片截取处理初始化

图片截取处理初始化分为2步:1)将图片按图片原尺寸结合缩小在500*500范围以内显示于HTML容器中,以便用户查看截取。

//计算图片按最大象素压缩后的宽与高

var width = tempimg.width; var height = tempimg.height;

if (width > height) { width = 500;

height = tempimg.height * (500 / tempimg.width);

document.getElementById("BiLi").value = 500 / tempimg.width;}//记录缩放比例

else { height = 500;

width = tempimg.width * (500 / tempimg.height);

document.getElementById("BiLi").value = 500 / tempimg.height; }//记录缩放比例

2)根据图片宽和高以及缩放比例生成JS截取处理对象。

document.getElementById("bgDiv").innerHTML =

"" + //定义截取框对象并加入母图HTML容器

"

"