JS图片刷新，网络连接断开时则不刷新

最新推荐文章于 2021-06-10 15:46:48 发布

a521101

最新推荐文章于 2021-06-10 15:46:48 发布

阅读量171

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/weiwelcome0/archive/2012/02/23/2364497.html

版权

背景：最近迷上炒股，如果可以在工作之余每天再多挣个百八十块钱，真的也不错。用手机看股票行情时总是要刷新网页，又或者想看的几个股票不在一个页面上，就只好自己动手写点东西来自动刷新页面，这个很简单拉。但是手机网络不太好，在网络不好时会导致本来显示的图片由于网络中断而自动刷新变成空白。于是就有了当网络好时自动刷新，网络不好时则维持刷新前的图片。

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style >
* {padding:0;margin:0;position:relative;}
#body { border:solid 1px #f00 }
#img_test1,#img_test2 { display:none}
</style>
</head>
<body>
<div id = 'body'>
<div id = 'jh_jin'>
<h3>建行纸黄金价格<span id = 'jh_jin_date'></span>
刷新间隔:<input id = 'jh_jin_text' type='text' value = '60' οnblur="setRefreshTime('img_test1',this.value*1000,refreshTest);" />s
</h3>
<img id ='jh_jin_img' src = 'http://price.zhjtong.com/1_jh_740_500.png' alt = '建行纸黄金价格'>
</img>
</div>
<div id = 'jh_yin'>
<h3>建行纸白银价格<span id = 'jh_yin_date'></span>
刷新间隔:<input id = 'jh_yin_text' type='text' value = '60' οnblur="setRefreshTime('img_test2',this.value*1000,refreshTest);" />s
</h3>
<img id ='jh_yin_img' src = 'http://price.zhjtong.com/1_ccb_silver_740_500.png' alt = '建行纸白银价格'>
</img>
</div>
</div>
<img id = 'img_test1' src = 'http://gimg.baidu.com/img/gs.gif' onload = 'refresh("jh_jin");' alt = '测试网络'/>
<img id = 'img_test2' src = 'http://gimg.baidu.com/img/gs.gif' onload = 'refresh("jh_yin");' alt = '测试网络'/>
<script lang = 'javascript' >
var srcMap = {'jh_jin_img':$('jh_jin_img').src,'jh_yin_img':$('jh_yin_img').src,'img_test1':$('img_test1').src,'img_test2':$('img_test2').src};
var signalMap = {};
function $(id){
return document.getElementById(id);
}
function refresh(id){
if(!$(id))
  return ;
var d = new Date();
$(id+'_date').innerHTML = d;
$(id+'_img').src = srcMap[id+'_img']+'?'+ d;
}
function refreshTest(id){
if(!$(id))
  return ;
$(id).src = srcMap[id]+'?'+ new Date();
}
function setRefreshTime(id,t,fun){
clearInterval(signalMap[id]);
if(t > 0){
  signalMap[id] = window.setInterval(function(){ fun(id)},t);
}
}
setRefreshTime('img_test1',60*1000,refreshTest);
setRefreshTime('img_test2',60*1000,refreshTest);