【应用】图片翻转js

图片翻转：图片随着鼠标指针划过进行替换

<img src="example.gif" onmouseover="this.src='exampleTwo.gif'" onmouseout="this.src='example.gif'" />

像图片翻转这样的效果需要较高的响应度，这也意味着需要想办法来确保一些必要的图片预提取，让浏览器缓存起来。

客户端JavaScript定义了一个专用API来达到这一目的：

为了强制让图片缓存起来，首先利用Image()构造函数来创建一个屏幕外图像对象，之后，对该对象的src属性设置成期望的URL。

由于图片元素并没有添加到文档中，因此，它是不可见的，但浏览器还是会加载图片并将其缓存起来。

这样一来，之后当设置成同样的URL来显示该屏幕内的图片时，它会很快从浏览器换从中加载，而不需要通过网络加载。

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style>
    img{
        position: absolute;top: 0;bottom: 0;left: 0;right: 0;
        margin: auto;
    }
</style>
</head>
<body>
<img src='{$Think.const.IMG_SRC}1.jpg' data-rollover="{$Think.const.IMG_SRC}2.jpg" width="300px" height="300px">

<script>
    /*当文档载入完成时调用一个函数*/
    //注册函数f，当文档载入完成时执行这个函数f
    //如果文档已经载入完成，尽快以异步方式执行它。
    function onLoad(f){
        if(onLoad.loaded)   //如果文档已经载入完成
            window.setTimeout(f,0); //将f放入一部队列，并尽快执行它
        else if(window.addEventListener) //注册事件的标准方法
            window.addEventListener("load",f,false);
        else if(window.attachEvent) //ie8以及更早的ie版本浏览器注册事件的方法
            window.attachEvent("onload",f);
    }
    //给onload设置一个标志，用来指示文档时候加载完成
    onLoad.loaded=false;
    //注册一个函数，当文档载入完成时设置这个标志
    onLoad(function(){
        onLoad.loaded=true;
    });
    /*优雅的图片翻转实现方式
    *
    * 在img元素上使用data-rollover 属性来指定翻转图片的url即可
    *
    * */
    onLoad(function(){
        //所有处理程序都在一个匿名函数中，不定义任何符号
        //遍历所有的图片，查找data-rollover 属性
        for(var i=0;i<document.images.length;i++){
            var img=document.images[i];
            var rollover=img.getAttribute('data-rollover');
            if(!rollover) continue; //跳过没有data-rollover 属性的图片

            //确保将翻转的图片缓存
            (new Image()).src=rollover;

            //定义一个属性来标志默认的图片URL
            img.setAttribute("data-rollout",img.src);

            //注册时间处理函数来创建翻转效果
            img.onmouseover=function(){
                this.src=this.getAttribute("data-rollover");
            };
            img.onmouseout=function(){
                this.src=this.getAttribute("data-rollout");
            }
        }
    });

 </script>
</body>
</html>