如何在以后的图像在javascript中可用时更改图像_Javascript

如何在以后的图像在javascript中可用时更改图像

javascript

如何在以后的图像在javascript中可用时更改图像,javascript,Javascript,我正在显示一些由服务器上的外部进程定期重新生成的缩略图。我想在页面加载时显示当前缺少的微调器（gif），并在最终到达时用缩略图替换微调器。显示微调器很简单。缩略图文件名都是预先知道的。我还没有找到一种方法来监视它们在Javascript中的显示在创建一些缩略图之前可能需要很多分钟。创建它们的进程会在执行新处理（生成新缩略图）之前删除它们。这些外部处理事件之间的间隔可以是小时有人能想出一个办法吗？（没有Ajax或Jquery，只有基本的Javascript）谢谢编辑-我相信这是可以改进的，

我正在显示一些由服务器上的外部进程定期重新生成的缩略图。我想在页面加载时显示当前缺少的微调器（gif），并在最终到达时用缩略图替换微调器。显示微调器很简单。缩略图文件名都是预先知道的。我还没有找到一种方法来监视它们在Javascript中的显示

在创建一些缩略图之前可能需要很多分钟。创建它们的进程会在执行新处理（生成新缩略图）之前删除它们。这些外部处理事件之间的间隔可以是小时

有人能想出一个办法吗？（没有Ajax或Jquery，只有基本的Javascript）

谢谢

编辑-我相信这是可以改进的，但似乎有效。谢谢你的提示和建议。它给了我想要的想法。有能力这样做的人可能想删除顶部关于这个问题的注释，这个问题已经通过链接得到了回答-这个问题不相关--JKC

var有效期，拇指；
函数刷新_thumbs（）{
//无论他们是否需要，都要刷新。如果拇指不在那里，
//onerror将（重新）加载微调器。
对于（i=0；i使用setInterval
定期更改正在等待的图像的src
。您可以将查询字符串以时间戳的形式附加到图像URL以防止缓存。不确定如何通过这种方式检测图像是否已准备就绪，但我确信，通过一些尝试和错误，很容易找到答案
更新：onerror
为您设置的每个无法访问的URL触发。继续使用新的时间戳轮询URL，直到您停止接收错误（这意味着映像已准备就绪）
更新：我尝试解决这个问题，试图找到一个通用的解决方案。以下是我的想法：
HTML:


JS:
var imgElems=[]，
imgUrls=[]；
功能imgErr（img）{
imgElems.push（img）；
//imgUrls.push（img.src）；//如果我理解正确，您的问题是不知道映像何时加载；您的问题是您无法发出映像请求，因为加载可能需要几个小时。因此，当您设置src时，它会超时，这就是您获得的所有信息
你有几个选择
获取文件的最简单方法可能是不断尝试重新加载每个图像。在这种情况下，虽然您希望在等待时显示一个带有微调器的单独div，但您已经接近了：
<img src='spinner.gif' id='spinner' />
<img src='thumb.png' id='thumb' />

document.getElementById("thumb").onload = function() {
    document.getElementById("spinner").style[display] = "hidden";
}
document.getElementById("thumb").onerror = function() {
    this.src = "thumb.png";
}

在那里的某个地方，您需要跟踪有多少仍然挂起，当它达到0时，调用window.clearInterval（intervalId）欢迎使用StackOverflow。您需要显示您的代码以获得帮助。您尝试了什么？您遇到了错误吗？帮助我们帮助您。我开始使用code
`code'，当然它只在页面加载时的状态下起作用。然后，当thumb.png出现时，它不会将微调器更改为thumb，例如，2分钟后我看不出onload事件绑定在这里有什么帮助-解释比否决票更有帮助。很可能你获得否决票是因为你没有显示足够的代码。在stackoverflow中显示代码是一件大事-我们喜欢帮助人们，但不是为他们做所有的工作。此外，你的问题有点不清楚。没有仔细阅读，看起来onload
会很有帮助-尝试加载图像，为加载时设置事件，这样你就可以了。你的问题没有直接说明，因为它花费了这么多小时，加载尝试超时，然后你就卡住了。如果你在问题中明确这个问题，你会得到更积极的结果如果你有答案，你回答自己的问题是完全可以接受的，而且比在问题内回答更好，一旦你回答了，就把你的答案标记为被接受的答案。（你可能还要等一天才能接受，我不确定。）这样，其他在这个问题前停留的人会看到一个明确的答案。你看到的关于已经被回答的问题的信息，如果它在所有其他问题之上，目前只对你可见。如果你谈论的是Jacob Krall的评论，不要担心。同样，它可能会帮助未来的访问者。这似乎是一个合理的选择e方法。我会尝试一下，然后再报告。谢谢你的帮助。仅供参考，这非常有效。这正是我想要的，我也学到了一些东西。谢谢！不客气。请将一个答案标记为已接受，这样人们就会知道这个问题已得到回答。var check_再次=[]；function init（thumbstring）{thumblist=thumbstring.split（“，”）；用于（i=0；我在降价方面遇到了问题。我在上面输入的每行有四个前导空格，这就是我得到的。实际上谈论这件事的字符限制似乎非常小。@scott你是如何用这么长的代码输入注释的？@jkcunningham我没有输入注释；我输入了答案。代码（每行有4个空格）问题和答案不受限制。您可以编辑您的问题以添加作为注释添加的代码。我对您的问题输入的注释限制为600个字符。您可以使用反引号突出显示内容，通常是代码。（在美式键盘上ESC的正下方。）一旦你有了足够的声誉，你也可以编辑其他人的问题和答案。elem.src=src+'？time='+new Date（）.getTime（）
很可能会强制重新加载并阻止缓存。@jkcunningham我想你的意思是@ScottMermelstein。ScottMermelstein，我想到的是浏览器缓存，我想这与本例无关。
<img src='/d/thumb_0.png' id='snap_0' onerror='this.src="/s/spinner.gif";'>
<img src='/d/thumb_1.png' id='snap_1' onerror='this.src="/s/spinner.gif";'>

<script>
    init("/d/thumb_0.png,/d/thumb_1.png");
</script> 

<body style="background-color: #CCC;">
    <img src="/img/fail.png" width=200 onerror="imgErr(this);" />
    <img src="/img/fail.png" width=200 onerror="imgErr(this);" />
    <img src="/img/fail.png" width=200 onerror="imgErr(this);" />
    <img src="/img/fail.png" width=200 onerror="imgErr(this);" />
    <img src="/img/fail.png" width=200 onerror="imgErr(this);" />
    <img src="/img/fail.png" width=200 onerror="imgErr(this);" />
</body>

var imgElems = [],
    imgUrls = [];

function imgErr(img) {
    imgElems.push(img);
    //imgUrls.push(img.src); // <-- real code
    imgUrls.push('/img/logo.png'); // <-- literal url for testing
}

onload = function () {
    var interval,
        timeout = 3000,
        time,
        url,
        img;

    interval = setInterval(function () {
        time = new Date().getTime();
        while (imgElems.length) {
            img = imgElems.shift();
            url = imgUrls.shift();
            img.src = url + '?time=' + time;
        }
    }, timeout);
}

<img src='spinner.gif' id='spinner' />
<img src='thumb.png' id='thumb' />

document.getElementById("thumb").onload = function() {
    document.getElementById("spinner").style[display] = "hidden";
}
document.getElementById("thumb").onerror = function() {
    this.src = "thumb.png";
}

var intervalId = window.setInterval( function() {
    var elem = document.getElementById("thumb");
    // set the source twice, since I dont' see anywhere in the spec if setting 
    // the src to itself forces a reload.  
    var src = elem.src;
    elem.src = "http://foofoofoofoofoo.bar.bar";
    elem.src = src;
}, 300000); // set to every 5 minutes (300 seconds * 1000 milliseconds)