关于GIF在click事件后不再动态显示的问题，求支招

码拜

9年 ago

文件下载代码，点击下载后下载按钮旁边出现GIF图片以表示正在加载，弹出下载提示框后删除该图片；但是，再次点击下载后，GIF图片不动态显示了，成了静态图片。代码如下：
<html>
<head>
<script src=”jquery-1.8.3.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(“.lnkDownFile”).click(function() {
//点击下载时，将GIF图片追加到下载A标签后面
$(“<img class=”waitImg” src=”wait.gif”></img>”).insertAfter(this);
//文件下载地址
var targetAPI=”http://192.168.3.107:82/logic/FileHandler.ashx?method=DownLoadAttach&attachIdentity=967b6af3-ab16-4001-82c1-40831466a66b”;
CreateIFrame(“downFrame”, targetAPI);
});
});

//创建iframe
function CreateIFrame(frameID, targetURL) {
var downFrame = document.getElementById(frameID);
if (downFrame == null) {
downFrame = document.createElement(“iframe”);
downFrame.id = frameID;
downFrame.name = frameID;
downFrame.style.display = “none”;
}
downFrame.src = targetURL;
//          下载完后删除GIF图片
//            downFrame.onreadystatechange = function() {
//                if (downFrame.readyState == “complete” || downFrame.readyState == “interactive”) {
//                    $(“img”).remove(“.waitImg”);
//                }
//            };
document.body.appendChild(downFrame);
}
</script>
</head>
<body>

解决方案

在click事件中用 event.preventDefault()

<html>
<head>
	<meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.0.0.min.js" type="text/javascript"></script>    
    <script type="text/javascript">
        $(document).ready(function() {
        $(".lnkDownFile").click(function() {
                //点击下载时，将GIF图片追加到下载A标签后面
                $("<img class="waitImg" src="http://www.dabaoku.com/gif/153/gif002.gif"></img>").insertAfter(this);
                //文件下载地址
                var targetAPI="http://www.dabaoku.com/gif/036/gif127.GIF";
                CreateIFrame("downFrame", targetAPI);
            });
        });
        
        //创建iframe
        function CreateIFrame(frameID, targetURL) {
            var downFrame = document.getElementById(frameID);
            if (downFrame == null) {
                downFrame = document.createElement("iframe");
                downFrame.id = frameID;
                downFrame.name = frameID;
                downFrame.style.display = "none";
				document.body.appendChild(downFrame);
            }
            downFrame.src = targetURL;
            downFrame.style.display = "";
//          下载完后删除GIF图片
//            downFrame.onreadystatechange = function() {
//                if (downFrame.readyState == "complete" || downFrame.readyState == "interactive") {
//                    $("img").remove(".waitImg");                    
//                }
//            };
            
        }
    </script>
</head>
<body>
    
    <a class="lnkDownFile" href="javascript:void(0);">下载</a>
    <iframe id="downFrame" name="downFrame" style="display:none;" ></iframe>
</body>
</html>