我目前正在使用一个Web应用程序，该应用程序的页面显示一个图表(.webp图像)。在此页面的另一部分上，有一组链接，当单击这些链接时，整个页面将重新加载，并且外观与之前完全相同，除了页面中间的图表。
我想要做的是单击页面上的链接时仅更改页面上的图表。由于页面大约100kb大，这将极大地加快处理速度，并且实际上并不想为了显示此页面而重新加载整个页面。
我一直在通过JavaScript进行此操作，到目前为止，该JavaScript可以使用以下代码进行操作
1
| document.getElementById('chart').src = '/charts/10.webp'; |
问题在于，当用户单击链接时，图表更改可能需要几秒钟的时间。这使用户认为他们的点击没有执行任何操作，或者系统响应速度很慢。
我要发生的是显示一个微调器/抖动器/状态指示器，以代替图像加载时的位置，因此，当用户单击链接时，他们至少知道系统已接受输入并正在执行操作关于它的东西。
我尝试了一些建议，甚至使用psudo超时来显示微调框，然后再飞回图像。
我收到的一个很好的建议是使用以下
1
| <img src="/charts/10.webp" lowsrc="/spinner.webp"/> |
这是理想的选择，但是微调器明显小于正在显示的图表。
还有其他想法吗？
我已经使用过类似的方法来预加载图像，然后在图像加载完成后自动调用我的JavaScript。您想在设置回调之前检查完成情况，因为图像可能已经被缓存，并且可能不会调用您的回调。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| function PreloadImage(imgSrc, callback){
var objImagePreloader = new Image();
objImagePreloader.src = imgSrc;
if(objImagePreloader.complete){
callback();
objImagePreloader.onload=function(){};
}
else{
objImagePreloader.onload = function() {
callback();
// clear onLoad, IE behaves irratically with animated gifs otherwise
objImagePreloader.onload=function(){};
}
}
} |
您可以显示一个静态图像，像这样，给人以刺眼的感觉。
使用jQuery的load()方法，很容易在图像加载后立即做一些事情：
1
2
3
| $('img.example').load(function() {
$('#spinner').fadeOut();
}); |
请参阅：http：//api.jquery.com/load-event/
使用setTimeout()函数的功能(更多信息)-这使您可以设置计时器以在将来触发函数调用，并且调用它不会阻止当前/其他函数的执行(异步。 )。
在图表图像上方放置一个包含微调框的div，并将其css display属性设置为none：
1
| <img src="spinner.webp" id="spinnerImg" style="display: none;" /> |
隐藏微调器时，nbsp阻止div崩溃。没有它，当您切换微调器的显示时，您的布局将"抽动"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| function chartOnClick() {
//How long to show the spinner for in ms (eg 3 seconds)
var spinnerShowTime = 3000
//Show the spinner
document.getElementById('spinnerImg').style.display ="";
//Change the chart src
document.getElementById('chart').src = '/charts/10.webp';
//Set the timeout on the spinner
setTimeout("hideSpinner()", spinnerShowTime);
}
function hideSpinner() {
document.getElementById('spinnerImg').style.display ="none";
} |
使用CSS将加载动画设置为图像容器的居中背景图像。
然后在加载新的大图像时，首先将src设置为预加载的透明1像素gif。
例如
1
2
| document.getElementById('mainimg').src = '/images/1pix.webp';
document.getElementById('mainimg').src = '/images/large_image.webp'; |
正在加载large_image.webp时，背景将通过1pix透明gif显示。
前段时间，我编写了一个jQuery插件，该插件可以自动显示微调器http://denysonique.github.com/imgPreload/
查看其源代码应该可以帮助您检测何时显示微调器，并将其显示在加载的图像的中心。
基于Ed的答案，我希望看到类似以下内容的内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
| function PreLoadImage( srcURL, callback, errorCallback ) {
var thePic = new Image();
thePic.onload = function() {
callback();
thePic.onload = function(){};
}
thePic.onerror = function() {
errorCallback();
}
thePic.src = srcURL;
} |
您的回调可以在适当的位置显示图像并放置/隐藏微调框，并且errorCallback阻止您的页面"陷入困境"。所有事件驱动，无需计时器或轮询，再也不必添加其他if语句来检查在设置事件的位置图像是否已完成加载-因为它们是预先设置的，因此会触发不管图像加载有多快。
我喜欢@duddle \\的jquery方法，但发现load()并不总是被调用(例如，当从IE中的缓存中检索图像时)。我改用以下版本：
1
2
3
4
5
6
7
| $('img.example').one('load', function() {
$('#spinner').remove();
}).each(function() {
if(this.complete) {
$(this).trigger('load');
}
}); |
最多调用一次加载，如果已经完成加载，则立即调用。
请注意，如果图像src不存在(http 404错误)，也会调用回调函数。为避免这种情况，您可以检查图像的宽度，例如：
1
| if(this.width == 0) return false; |
除了lowsrc选项外，我还在img \\的容器上使用了background-image。
将微调器放入与图表相同大小的div中，您知道其高度和宽度，因此可以使用相对定位将其正确居中。
我会添加一些随机数字以避免浏览器缓存。
@iAn的解决方案对我来说很好。我唯一要更改的是不使用setTimeout，而是尝试挂接到图像\\'Load \\'事件。这样，如果图片下载时间超过3秒，您仍然可以使用微调器。
另一方面，如果下载时间较少，则可以在不到3秒的时间内获得微调器。
