Onelong

分享知识,与你一起进步......
RSS icon Home icon
  • js判断是否图片加载完了

    post by onelong / 2009-10-10 18:39 Saturday [javascript]

    <script>
    function SImage(callback){
        var img = new Image();
        this.img = img;
        var appname = navigator.appName.toLowerCase();
        if (appname.indexOf("netscape") == -1){
           //ie
            img.onreadystatechange = function () {
                if (img.readyState == "complete")
                {
                    callback(img);
                }
            };
        } else {
           //firefox
            img.onload = function () {
                if (img.complete == true)
                {
                    callback(img);
                }
            }
        }
    }

    阅读全文>>

  • JS预览客户端图片

    post by onelong / 2009-10-9 16:35 Friday [javascript]

    <html>
    <head>
    <style>
    #preview {
    width: 270px;
    height: 129px;
    }
    </style>
    <!--[if IE]>
    <style>
    #preview {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
    }
    </style>
    <![endif]-->
    <script>
    function preview(image)
    {
    if ("Microsoft Internet Explorer" == navigator.appName) {
    document.getElementById("image").style.display = "none";
    document.getElementById("preview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = image.value;
    } else if ("Netscape" == navigator.appName){
    document.getElementById("image").src = image.files[0].getAsDataURL();
    } else {
    alert("Not Support!");
    }
    }
    </script>
    </head>
    <body>
    <input type="file" onChange="preview(this);" />
    <div id="preview">
    <img id="image" src="http://www.baidu.com/img/baidu_logo.gif" />
    </div>
    </body>
    </html>

  • js图片加载错误的处理

    post by onelong / 2009-10-7 0:27 Wednesday [javascript]

    <html>
      <body>
      <div id="show">加载中.......</div>//加载过程要显示的内容或gif的小动画
      <script language="javascript">
      function $(id){
       return document.getElementById(id);
       }
      var image=new Image();
      image.src='http://www.xd26.com/photo/up_files/2009-03-27/1238121079Qa5x.jpg';
      image.onload=function(){//加载完成后执行的事件
     $("show").innerHTML="<img style='width:20%; height:20%' src="+image.src+">";
     }
     image.onerror=function(){//加载错误的处理方式;
     $("show").innerHTML="<img style='width:20%; height:20%' src='http://hiphotos.baidu.com/vga1/pic/item/021a645d0fb12061fbf2c0b9.jpg'>";
      }
      </script>
      </body>
      </html>

    阅读全文>>

  • JS的图片预加载效果原理

    post by onelong / 2009-10-6 4:15 Tuesday [javascript]

    <img id="myImage" src="small_144.jpg" width="640" />//首先显示一张很小的图片 
        var img = new Image();
        img.src = "big_640_480.jpg";
        img.onload = function() {
        document.myImage.src = this.src;//大的图片加载完后,替代原来的那张图片
       }