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>

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

查看全文

相关阅读:
ubuntu安装gradle
ubuntu文件查找
 接口服务flask的负载均衡部署
 区块链节点网络的nginx转发部署
 typescript检查包之间是否有循环依赖
 shiro对事务的影响
 防止xss(脚本攻击)的方法之过滤器
 Mysql批量更新速度慢的解决方案
 springBoot的三种启动方式
 mybatis的注解开发之三种动态sql

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