一些图片在js应用的资料-CSDN博客

本文链接：https://blog.csdn.net/tianyazjq/article/details/83365742


//预装载一个图片;
            var iImage = new Image();
            iImage.src = "1.gif"
//预装载多个图片示例;
var aImagList = ["one", "two", "three", "four"];
var tempImage = [];
for(var i=0;i<aImagList .length;i++){
  tempImage[i]=new Image();
  tempImage[i].src=aImagList[i]+".gif";
}

具体的一个小示例的应用


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <title>Swap Image</title>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <script type="text/javascript" src="com.js">
        </script>
        <script type="text/javascript">

            var obj = $("father");
            console.log("test");
            var oImage = new Image();
            var f = function(){


                var img = $("father");

                oImage.onload = function(){
                    img.src = oImage.src;
                    img.height = oImage.height;
                    img.width = oImage.width;
                }
                oImage.src = "2.gif";

            }
            addLoadListener(f);
        </script>
        <style type="text/css">
            img {
                display: block;
            }
        </style>
    </head>
    <body>
        <p>
            Luke's father is<img id="father" src="darth.gif" alt="Darth Vader">
        </p>
    </body>
</html>

1.要注意这里不先给oImage 赋src的值，是为了在图片装载情况下．load事件可能在onload事件作出响应前发生，在safari浏览器更为明显，更容易发生
2.这里用newImg，而不用this来代替，一般来说，在事件处理函数中this指向给分配处理函数的那个对象，但是在safari 1.3与2.0中，有个bug，this指向到与images对象对应的onload事件处理函数中的window.所以我们要newImg直接来进行操作．