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

.Net技术 码拜 9年前 (2016-02-28) 1486次浏览
文件下载代码,点击下载后下载按钮旁边出现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>

<a class=”lnkDownFile” href=”javascript:void(0);”>下载</a>
<iframe id=”downFrame” name=”downFrame” style=”display:none;” ></iframe>
</body>
</html>

解决方案

20

在click事件中用 event.preventDefault()

20

<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>

CodeBye 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明关于GIF在click事件后不再动态显示的问题,求支招
喜欢 (0)
[1034331897@qq.com]
分享 (0)