javascript图像src更改事件（非加载事件）
我正在尝试实现以下功能：用户单击一个小缩略图（低分辨率图像），然后将大图像设置在同一个源上。异步下载更高分辨率的图像，并在下载准备就绪时渲染为大图像。下载时，低分辨率图像旁边应该有一个指示灯，指示正在下载更高分辨率的图像。此外，图像下载后应始终从浏览器缓存中检索 我尝试过以下方法（不是完整的解决方案，但更像是实验）javascript图像src更改事件（非加载事件）,javascript,jquery,html,image,Javascript,Jquery,Html,Image,我正在尝试实现以下功能：用户单击一个小缩略图（低分辨率图像），然后将大图像设置在同一个源上。异步下载更高分辨率的图像，并在下载准备就绪时渲染为大图像。下载时，低分辨率图像旁边应该有一个指示灯，指示正在下载更高分辨率的图像。此外，图像下载后应始终从浏览器缓存中检索 我尝试过以下方法（不是完整的解决方案，但更像是实验） $（'bigphoto'）。在（'load'，function（）上{ console.log（'loaded'）； if（$（'#bigphoto'）.attr（'src'）。i
$（'bigphoto'）。在（'load'，function（）上{
console.log（'loaded'）；
if（$（'#bigphoto'）.attr（'src'）。includes（'type=low res'））{
$（“#加载”）.show（）；
}否则{
$（“#加载”）.hide（）；
}
});
功能paivitaKuva（kuvaEl）{
var src=kuvaEl.getAttribute（'src'）；
var r_src=kuvaEl.getAttribute（'r-src'）；
$（'bigphoto'）.attr（'src'，src）；
$（'bigphoto'）.attr（'src'，r#src）；
}
加载
缩略图视图示例
//全局变量
var loadingFlag=false；
var statusElem=null；
var hrElem=null；
var hrIMG=null；
函数进程选择（tnElem）
{
var hrSrc=null；
尝试
{
如果（！loadingFlag）
{
loadingFlag=true；
statusElem.innerHTML=“正在加载…”；
hrElem.src=tnElem.src；
hrElem.setAttribute（“宽度”、“64”）；
hrElem.setAttribute（“高度”、“64”）；
hrSrc=tnElem.getAttribute（“hrSrc”）；
加载图像（hrSrc）；
}
其他的
{
警报（“当前正在加载另一个图像。\r\n一次只能加载一个图像。\r\n请稍后再试。”）；
}
}
捕获（e）
{
警报（“进程选择错误：+e.Message”）；
}
最后
{
}
}
函数装入图像（url）
{
尝试
{
hrIMG.src=url；
}
捕获（e）
{
警报（“加载图像错误：+e.Message”）；
}
最后
{
}
}
函数setHRImage（）
{
var错误=错误；
尝试
{
hrElem.src=hrIMG.src；
错误=（hrIMG.width==0 | | hrIMG.height==0）；
如果（！错误）
{
setAttribute（“width”，hrIMG.width.toString（））；
setAttribute（“height”，hrIMG.height.toString（））；
}
}
捕获（e）
{
错误=真；
警报（“设置图像错误：+e.Message”）；
}
最后
{
loadingFlag=false；
if（error）statusElem.innerHTML=“加载…失败。”；
else statusElem.innerHTML=“加载…已完成。”；
}
}
选择缩略图以查看高分辨率版本
//初始化全局变量
statusElem=document.getElementById（“状态”）；
hrElem=document.getElementById（“hrImage”）；
hrIMG=新图像（）；
hrIMG.addEventListener（'loadend'，setHRImage，false）；
load event triggers after download is ready, not when the src is being changed
- have you considered using an onclick event to trigger the toggling of the "status" div content?
if the image is being retrieved from browser cache, seems like load event won't always trigger consistently
- see previous suggestion (onclick event for each thumbnail img element)... also, you are using some kind of querystring in the initial Hi-Res IMG src, perhaps you should do the same when loading subsequent Hi-Res sources (e.g. - time stamp value at time of click event)
There are actually list of different thumbnails and just a single big photo. I'm considered what happens if the user rapidly changes the photos
- you could create a global variable, e.g. - var loadingFlag = false, that you toggle between true and false while processing the requests...if one is currently being processed, ignore subsequent clicks on the IMG elements...after the Hi-Res IMG is loaded, set the variable back to 'false'
<!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>
<title>Thumbnail View Sample</title>
<script type="text/javascript" language="javascript">
// Global variables
var loadingFlag = false;
var statusElem = null;
var hrElem = null;
var hrIMG = null;
function processSelection(tnElem)
{
var hrSrc = null;
try
{
if (!loadingFlag)
{
loadingFlag = true;
statusElem.innerHTML = "Loading...";
hrElem.src = tnElem.src;
hrElem.setAttribute("width", "64");
hrElem.setAttribute("height", "64");
hrSrc = tnElem.getAttribute("hrsrc");
loadHRImage(hrSrc);
}
else
{
alert("Currently loading another image.\r\nOnly one image can be loaded at a time.\r\nTry again, later.");
}
}
catch (e)
{
alert("processSelection Error: " + e.Message);
}
finally
{
}
}
function loadHRImage(url)
{
try
{
hrIMG.src = url;
}
catch (e)
{
alert("loadHRImage Error: " + e.Message);
}
finally
{
}
}
function setHRImage()
{
var error = false;
try
{
hrElem.src = hrIMG.src;
error = (hrIMG.width==0 || hrIMG.height==0);
if(!error)
{
hrElem.setAttribute("width", hrIMG.width.toString());
hrElem.setAttribute("height", hrIMG.height.toString());
}
}
catch (e)
{
error = true;
alert("setHRImage Error: " + e.Message);
}
finally
{
loadingFlag = false;
if (error) statusElem.innerHTML = "Loading...failed.";
else statusElem.innerHTML = "Loading...completed.";
}
}
</script>
</head>
<body>
<div id="theStatus" ><b>Select a Thumbnail Image to View the High Resolution version</b></div><hr/>
<table>
<tr>
<td style="vertical-align: top">
<table>
<tr><td><img id="tn0" alt="" src="https://i.pinimg.com/736x/01/c0/1c/01c01c45cb997f16675c5a5825645ceb--funny-happy-birthdays-pictures-of.jpg" width="64" height="64" hrsrc="https://www.manitowoccranes.com/~/media/Images/news/2014/Potain-China-hi-res.jpg" onclick="processSelection(this)" title="Click to view High Resolution version" /></td></tr>
<tr><td><img id="tn1" alt="" src="https://i.pinimg.com/736x/01/c0/1c/01c01c45cb997f16675c5a5825645ceb--funny-happy-birthdays-pictures-of.jpg" width="64" height="64" hrsrc="https://www.manitowoccranes.com/~/media/Images/news/2014/Potain-China-hi-res.jpg" onclick="processSelection(this)" title="Click to view High Resolution version" /></td></tr>
<tr><td><img id="tn2" alt="" src="https://i.pinimg.com/736x/01/c0/1c/01c01c45cb997f16675c5a5825645ceb--funny-happy-birthdays-pictures-of.jpg" width="64" height="64" hrsrc="https://www.manitowoccranes.com/~/media/Images/news/2014/Potain-China-hi-res.jpg" onclick="processSelection(this)" title="Click to view High Resolution version" /></td></tr>
</table>
</td>
<td></td>
<td>
<img id="hrImage" alt="" src="" />
</td>
</tr>
</table>
<script type="text/javascript" language="javascript">
// Initialize global variables
statusElem = document.getElementById("theStatus");
hrElem = document.getElementById("hrImage");
hrIMG = new Image();
hrIMG.addEventListener('loadend', setHRImage, false);
</script>
</body>
</html>