Question

我正在尝试实现以下功能：用户点击小缩略图（低分辨率图像），并在同一来源设置大图像。异步地，正在下载更高分辨率的图像，并在下载准备就绪时渲染为大图像。下载时，低分辨率图像旁边应该有一个指示符，表示正在下载更高分辨率的图像。此外，一旦下载图像，应始终从浏览器缓存中检索图像。

我尝试过以下方法（不是完整的解决方案，更像是试验）

$('#bigphoto').on('load', function() {
  console.log('loaded');
  if ($('#bigphoto').attr('src').includes('type=low-res')) {
    $('#loading').show();
  } else {
    $('#loading').hide();
  }
});

function paivitaKuva(kuvaEl) {

  var src = kuvaEl.getAttribute('src');
  var r_src = kuvaEl.getAttribute('r-src');

  $('#bigphoto').attr('src', src);
  $('#bigphoto').attr('src', r_src);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="bigphoto" src="http://www.viikonloppu.com/wp-content/uploads/2014/04/lotoflaughters.com_-619x428.jpg?c3bc1b" />

<img id="thumbnail" src="https://i.pinimg.com/736x/01/c0/1c/01c01c45cb997f16675c5a5825645ceb--funny-happy-birthdays-pictures-of.jpg" r-src="https://www.manitowoccranes.com/~/media/Images/news/2014/Potain-China-hi-res.jpg" onClick="paivitaKuva(this)" )
/>

<div id="loading">loading</div>

有几个问题：

在下载准备就绪后加载事件触发器，而不是在更改src时

如果从浏览器缓存中检索图像，似乎加载事件并不总是始终触发

实际上有不同缩略图的列表，只有一张大照片。我被认为如果用户快速更改照片会发生什么

如何使用javascript干净地实现这一点？

Answer 1

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

Answer 2

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'

javascript图像src更改事件（不加载事件）

2 个答案: