图片的预加载
javascript通过占位方式获取图片头部数据的尺寸
十多年的上网经验告诉我:浏览器在加载图片的时候你会看到图片会先占用一块地然后才慢慢加载完毕,并且这里大部分的图片都是没有预设width与height属性的,因为浏览器能够获取图片的头部数据。基于此,只需要使用javascript定时侦测图片的尺寸状态便可得知图片尺寸就绪的状态。
实现代码:
var imgReady = function (url, callback, error) {
var width, height, intervalId, check, div,
img = new Image(),
body = document.body;
img.src = url;
// 从缓存中读取
if (img.complete) {
return callback(img.width, img.height);
};
// 通过占位提前获取图片头部数据
if (body) {
div = document.createElement('div');
div.style.cssText = 'visibility:hidden;position:absolute;left:0;top:0;width:1px;
height:1px;overflow:hidden';
div.appendChild(img)
body.appendChild(div);
width = img.offsetWidth;
height = img.offsetHeight;
check = function () {
if (img.offsetWidth !== width || img.offsetHeight !== height) {
clearInterval(intervalId);
callback(img.offsetWidth, img.clientHeight);
img.onload = null;
div.innerHTML = '';
div.parentNode.removeChild(div);
};
};
intervalId = setInterval(check, 150);
};
// 加载完毕后方式获取
img.onload = function () {
callback(img.width, img.height);
img.onload = img.onerror = null;
clearInterval(intervalId);
body && img.parentNode.removeChild(img);
};
// 图片加载错误
img.onerror = function () {
error && error();
clearInterval(intervalId);
body && img.parentNode.removeChild(img);
};
};
JavaScript实现网页图片等比例缩放
//图片按比例缩放,可输入参数设定初始大小
function resizeimg(ImgD,iwidth,iheight) {
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
ImgD.style.cursor= "pointer"; //改变鼠标指针
ImgD.onclick = function() { window.open(this.src);} //点击打开大图片
if (navigator.userAgent.toLowerCase().indexOf("ie") > -1) { //判断浏览器,如果是IE
ImgD.title = "请使用鼠标滚轮缩放图片,点击图片可在新窗口打开";
ImgD.onmousewheel = function img_zoom() //滚轮缩放
{
var zoom = parseInt(this.style.zoom, 10) || 100;
zoom += event.wheelDelta / 12;
if (zoom> 0) this.style.zoom = zoom + "%";
return false;
}
} else { //如果不是IE
ImgD.title = "点击图片可在新窗口打开";
}
}
}
具体实现代码如下:
<img name="" src="" onload="javascript:resizeimg(this,100,200)">
分享到:
相关推荐
jquery图片预加载+等比例缩放,不论图片有多大,都可以让他在不变形的情况下等比例缩放
使用jQuery实现图片预加载和自动等比例缩放插件
**************图片预加载插件****************** ///作者:没剑(2008-06-23) ///http://regedit.cnblogs.com ///说明:在图片加载前显示一个加载标志,当图片下载完毕后显示图片出来 可对图片进行是否自动缩放功能 ...
**************图片预加载插件****************** ///作者:没剑(2008-06-23) http://regedit.cnblogs.com ///参数设置: scaling 是否等比例自动缩放 width 图片最大高 height 图片最大宽 loadpic 加载中的图片路径...
代码如下: /* * Image preload and auto zoom * scaling 是否等比例自动缩放 * width 图片最大高 * height 图片最大宽 * loadpic 加载中的图片路径 * example $(“*”).LoadImage(true,w,h); */ jQuery.fn.LoadImage...
网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考虑流量的话,大可以像pconline一样...因此,实现图片预加载就成为图片浏览器的核心功能了。 做过图片翻转效果的朋友其实都知道,要让图片轮换的时候不出
很多时候再项目中,我们往往需要先获取图片的大小再加载图片,但是某些特定场景,如用过cocos2d-js的人都知道,在它那里只能按比例缩放大小,是无法设置指定大小的图片的,这就是cocos2d-js 的坑了,我们必须先获取...
15:___JavaScript图片预加载代码,显示loading 16:___JavaScript改变图片透明度,鼠标放上渐渐显示 17:___JavaScript真正的鼠标放上动画加载大图的 18:___JS+CSS给图片加上鼠标滑过的方框 19:___JS卡通图片切换 20:_...
7.4 Facebook风格的图片预加载 7.5 检查图片src是否有效 7.6 上下滑动的图片 7.7 淡入淡出一幅图片,进入另一幅图片 7.8 获取图片原生尺寸的方法 7.9 检查图像是否已经被完全加载 7.10 单击改变背景图案 7.11 如何...
[Fix]Xp/IE6上新建的标签和预定义的页面缩放比例不一致 [Fix]有时候背景窗口弹出前台 [Fix]有时候Title Bar和页面内容不一致 [Fix]browser:home中的搜索功能失效 [Fix]设置为在前台打开链接时ctrl+shift+鼠标...
[Fix]Xp/IE6上新建的标签和预定义的页面缩放比例不一致 [Fix]有时候背景窗口弹出前台 [Fix]有时候Title Bar和页面内容不一致 [Fix]browser:home中的搜索功能失效 [Fix]设置为在前台打开链接时ctrl+shift+鼠标...
[Fix]Xp/IE6上新建的标签和预定义的页面缩放比例不一致 [Fix]有时候背景窗口弹出前台 [Fix]有时候Title Bar和页面内容不一致 [Fix]browser:home中的搜索功能失效 [Fix]设置为在前台打开链接时ctrl+shift+鼠标...
值类型包括简单类型(如 char、int 和 float 等)、枚举类型和结构类型。引用类型包括类 (Class)类 型、接口类型、委托类型和数组类型。 变量的类型声明 变量的类型声明 每个变量必须预先声明其类型。如 int a; int ...