zoukankan html css js c++ java

图片预加载技术(存在问题，已修复)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript">
    var newload= function(){
        urlone="http://www.leyoo.com/Public/nImg/Zhuanti/20131231/run_img_"
        urllast=".png"
        for(var i=1; i<9; i++)
            {
                url = urlone + i + urllast;
                oid = "im"+i;
                imgLoad(url,fimg);
            }
        }
    var fimg=function(x,y){
                    document.getElementById(oid).width = x;
                    document.getElementById(oid).height = y;
                    document.getElementById(oid).src = url;
                    }
    var imgLoad = function (url, callback) {
    var img = new Image();
    img.src = url;
    if (img.complete) {
        callback(img.width, img.height);
    } else {
        img.onload = function () {
            callback(img.width, img.height);
            img.onload = null;
        };
    };
    };
</script>

</head>

<body>
<a onClick="newload()">点击</a>
<img src="myFocus_white.gif" id="im1" />
<img src="myFocus_white.gif" id="im2"/>
<img src="myFocus_white.gif" id="im3"/>
<img src="myFocus_white.gif" id="im4"/>
<img src="myFocus_white.gif" id="im5"/>
<img src="myFocus_white.gif" id="im6"/>
<img src="myFocus_white.gif" id="im7"/>
<img src="myFocus_white.gif" id="im8"/>
</body>
</html>

小练习一下

这个练习是有问题的，只能用于单张图片的预加载，这个例子使用了异步调用的方法加载多张图片，要点击多次才能显示全部图片，以后再来完善

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript">
    var newload= function(){
            urlone="http://www.leyoo.com/Public/nImg/Zhuanti/20131231/run_img_"
            urllast=".png"
            for(var i=1; i<9; i++)
                {
                    url = urlone + i + urllast;
                    oid = "im"+i;
                    var tt =function(url,oid){//插入闭包保存数据
                        imgLoad(url,function(x,y){
                            //alert(url);
                        document.getElementById(oid).width = x;
                        document.getElementById(oid).height = y;
                        document.getElementById(oid).src = url;
                    });}(url,oid)
                }
        }
    //var fimg=
    var imgLoad = function (url, callback) {
        var img = new Image();
        img.src = url;
        if (img.complete) {
            callback(img.width, img.height);
        } else {
            img.onload = function () {
                callback(img.width, img.height);
                img.onload = null;
            };
        };
    };
    
</script>
</head>

<body>
<a onClick="newload()">点击</a>
<img src="myFocus_white.gif" id="im1" />
<img src="myFocus_white.gif" id="im2"/>
<img src="myFocus_white.gif" id="im3"/>
<img src="myFocus_white.gif" id="im4"/>
<img src="myFocus_white.gif" id="im5"/>
<img src="myFocus_white.gif" id="im6"/>
<img src="myFocus_white.gif" id="im7"/>
<img src="myFocus_white.gif" id="im8"/>
</body>
</html>

这个是完善后的，不过加载时的图是本地

查看全文

相关阅读:
Watchguard公司内部招聘：C Developer in Linux Requirements
条件注释判断浏览器<![if !IE]><![if IE]><![if lt IE 6]><![if gte IE 6]>
js之事件冒泡和事件捕获详细介绍
 javascript:;与javascript:void(0)使用介绍
 IE和FireFox中JS兼容之event .
Adobe下周将推新补丁和新的更新模式狼人:
微软下周二发布11个补丁修复25个安全漏洞狼人:
安全专家担心Adobe没有足够实力来阻止黑客攻击狼人:
保证安全认清五种易被忽视的攻击方式狼人:
六成黑客攻击与PDF漏洞有关远超微软狼人:

原文地址：https://www.cnblogs.com/lichuntian/p/javascript_loadimg_one.html