前端开发_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”;

<head>

</head>

<body>

</body>

</html>

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>

上面的实例在本地运行可能看不出效果来，因为一触，图片马上显示出来了。然而，我们可以加一个延迟展示，为了看看效果，请看下面的代码：

<head>

</head>

<body>

</body>

</html>

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>

</body>

另一个栗子：

<html>

<title>图片预加载</title>

<body>

//判断浏览器

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>

</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加载图片时显示的小图标

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发