前端开发_JS加载图片时显示的小图标

做前端开发要怎么学?|前端开发技能特长怎么写?|怎么提高前端开发代码规范?
有开发经验的程序员朋友会想到 img 对象中的 onload 事件,没错!就是使用它来完成这一重任。先看下面一段代码:
var img = new Image();
img.src = “lezhu99.gif”;
img.onload = function() {
alert(“www.lezhu99.com”);
};
笔者经过测试,这段代码在 FireFox 浏览器下是可行的,但是在 IE6、IE7、IE8 下是无效的!哪该怎么办?
其实原理是因为下载时,浏览器会把图片缓存起来,再次加载此图片时就会从缓冲区里加载。那么如果图片已经在缓存区了,是不是从缓冲区里加载的图片就不触发onload事件呢?经过多次尝试,改造之后都是可行的,请看下面的代码:
var img = new Image();
img.onload = function() {
alert(“编程入门”);
};
img.src = “lezhu99.gif”;
下面举一个实例,如果图片还在加载中,显示一个会转动的小图标,表示图片正在加载中,请看下面的代码:
<html xmlns=”http://www.w3.org/1999/xhtml&quot; >
<head>
<title></title>
</head>
<body>
<input type=”button” value=”测试” onclick=”ShowImg();” />
<div id=”div1″></div>
<div id=”div2″></div>
</body>
</html>
<script type=”text/javascript”>
function ShowImg() {
var div1 = document.getElementById(“div1”);
var div2 = document.getElementById(“div2”);
div1.innerHTML = “<img src=’Images/loading.gif’ />”;
var img = new Image();
img.onload = function() {
div1.innerHTML = “”;
};
img.src = “11111.jpg”;
div2.appendChild(img);
}
</script>
上面的实例在本地运行可能看不出效果来,因为一触,图片马上显示出来了。然而,我们可以加一个延迟展示,为了看看效果,请看下面的代码:
<html xmlns=”http://www.w3.org/1999/xhtml&quot; >
<head>
<title></title>
</head>
<body>
<input type=”button” value=”测试” onclick=”ShowImg();” />
<div id=”div1″></div>
<div id=”div2″></div>
</body>
</html>
<script type=”text/javascript”>
function ShowImg() {
var div1 = document.getElementById(“div1”);
var div2 = document.getElementById(“div2”);
div1.innerHTML = “<img src=’Images/loading.gif’ />”;
var t1 = setTimeout(function() {
var img = new Image();
img.onload = function() {
div1.innerHTML = “”;
};
img.src = “Images/11111.jpg”;
div2.appendChild(img);
}, 3000);
}
</script>
这里只是作一个简单的介绍,实际开发中可能会复杂很多。不过,不论多复杂的图片正在加载中功能都离不开 img.onload 这个核心事件的应用。
http://www.lezhu99.com/2413.html
举一个例子:
var img2=new Image();
img2.onload=function()
{
$(“body”).append(img2);
$(“#img1”).remove();
}
img2.src=”22.jpg”;
<body>
<img id=”img1″ src=”11.jpg” />
</body>
另一个栗子:
<html>
<title>图片预加载</title>
<body>
<script>
//判断浏览器
var Browser=new Object();
Browser.userAgent=window.navigator.userAgent.toLowerCase();
Browser.ie=/msie/.test(Browser.userAgent);
Browser.Moz=/gecko/.test(Browser.userAgent);
//判断是否加载完成
function Imagess(url,imgid,callback){
var val=url;
var img=new Image();
if(Browser.ie){
img.onreadystatechange =function(){
if(img.readyState==”complete”||img.readyState==”loaded”){
callback(img,imgid);
}
}
}else if(Browser.Moz){
img.onload=function(){
if(img.complete==true){
callback(img,imgid);
}
}
}
//如果因为网络或图片的原因发生异常,则显示该图片
img.onerror=function(){img.src=’http://www.baidu.com/img/baidu_logo.gif’}
img.src=val;
}
//显示图片
function checkimg(obj,imgid){
document.getElementById(imgid).src=obj.src;
}
//初始化需要显示的图片,并且指定显示的位置
window.onload=function(){
Imagess(“http://hiphotos.baidu.com/lovebyakuya/pic/item/01cf20088f9506f063d98653.jpg”,”img1″,checkimg);
Imagess(“http://hiphotos.baidu.com/lovebyakuya/pic/item/7b7b19c70d62f4fdd0006050.jpg”,”img2″,checkimg);
Imagess(“http://hiphotos.baidu.com/joanne728/pic/item/892557641806d20eaa184c71.jpg”,”img3″,checkimg);
Imagess(“http://www.neocha.com/-/res/Camilla/20071204181216078845_h.jpg”,”img4″,checkimg);
Imagess(“http://www.neocha.com/-/res/Camilla/20071204181216d078845_h.”,”img5″,checkimg);
}
</script>
<img id=”img1″ src=”loading.gif” width=”100″ height=”100″ />
<img id=”img2″ src=”loading.gif” width=”100″ height=”100″ />
<img id=”img3″ src=”loading.gif” width=”100″ height=”100″ />
<img id=”img4″ src=”loading.gif” width=”100″ height=”100″ />
<img id=”img5″ src=”loading.gif” width=”100″ height=”100″ />
</body>
</html>
http://www.soso.io/article/32012.html
另一个离子
function loadimg(arr,funLoading,funOnLoad,funOnError){
var numLoaded=0,
numError=0,
isObject=Object.prototype.toString.call(arr)===”[object Object]” ? true : false;
var arr=isObject ? arr.get() : arr;
for(a in arr){
var src=isObject ? $(arr[a]).attr(“data-src”) : arr[a];
preload(src,arr[a]);
}
function preload(src,obj){
var img=new Image();
img.onload=function(){
numLoaded++;
funLoading && funLoading(numLoaded,arr.length,src,obj);
funOnLoad && numLoaded==arr.length && funOnLoad(numError);
};
img.onerror=function(){
numLoaded++;
numError++;
funOnError && funOnError(numLoaded,arr.length,src,obj);
}
img.src=src;
}
}
参数说明:
arr:可以是存放图片路径的一个数组,也可以是选取到的img的jquery对象
funLoading:每一个单独的图片加载完成后执行的操作
funOnLoad:全部图片都加载完成后的操作
funOnError:单个图片加载出错时的操作
前端开发经验怎么写?|前端开发是怎么调试的.?|前端开发特殊字体怎么设置?
» 本文来自:前端开发者 » 《前端开发_JS加载图片时显示的小图标》
» 本文链接地址:https://www.rokub.com/4468.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!