javascript 图像 src 更改事件(不是加载事件)-6ren

javascript 图像 src 更改事件(不是加载事件)

转载作者：行者123 更新时间：2023-11-30 21:05:20

25

4

我正在尝试实现以下内容:用户单击一个小缩略图(低分辨率图像)，并将大图像设置在同一来源。异步下载更高分辨率的图像，并在下载准备就绪时渲染为大图像。下载时，低分辨率图像旁边应该有一个指示器，表明正在下载更高分辨率的图片。此外，图像在下载后应始终从浏览器缓存中检索。

我尝试了以下方法(不是完整的解决方案，但更像是试验)

$('#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>

有几个问题:

load 事件在下载准备好之后触发，而不是在更改 src 时触发
如果图像是从浏览器缓存中检索的，加载事件似乎不会始终一致地触发
实际上有不同缩略图的列表和一张大照片。我在考虑如果用户快速更改照片会发生什么

如何使用 javascript 干净地实现它？

最佳答案

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

关于javascript 图像 src 更改事件(不是加载事件)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46689244/

25

4

0

文章推荐： javascript - 如何在网站中使用 Bokeh 图 url

文章推荐： c# - 在没有内存泄漏的情况下替换巨大字符串中的文本

javascript - 获取图像 src 如果有多个则获取图像 src 只获取一张图像 src
我正在尝试使用 jquery 获取图像 src，如下所示: HTML Javascript var imageSrc = $('.post_container img').attr('s
android - 在 [src/nullnull/debug, src/debug/nullnull, src/nullnull, src/debug, src/nullnullDebug] 中找不到 google-services.json
我遇到错误，无法完成构建。我搜索了 Stackoverflow 和 Github。我已经尝试了很多方法，但我无法修复。请帮忙。 (1) 在 [src/nullnull/debug, src/debug
javascript - if img.src === img.src === img.src - 无法让它工作
我正在尝试使用图像制作一款类似 Match3 的游戏，但我无法进行比较。我正在为固定数量的 atm 执行此操作，只是为了让它正常工作，稍后应该在 foreach 循环中。如果有什么区别的话，该函数位于
javascript - 如何将 Angular ng-src 的输出从 'src' 属性更改为 'data-src' ？
我正在使用 jquery 插件 OwlCarousel，在我的一个 View 中使用 ng-repeat 场景，如下所示: 它运行良好，并为轮播中的每个项目输出以下标记: 有没
java - 双边过滤错误，断言失败 ((src.type() == CV_8UC1 || src.type() == CV_8UC3) && src.data != dst.data)
我的代码如下所示: Bitmap b = BitmapFactory.decodeResource(getResources(), R.drawable.image1); int wi
javascript - 如何使用指令用新的后备 src 更新 src？
如果未找到 src，我将使用 Angular 指令作为后备 url 作为名称首字母指令 (function () { 'use strict'; angular .m
javascript - 获取 SRC 本身包含特定单词的脚本标签的完整 src
我是构建 chrome 扩展的新手，从一个小项目开始，我需要在弹出窗口中打印“构建版本”。构建版本被附加到 JS/CSS 资源中，如下所示: 需要从脚本 src 值中提取“6.0”。你能帮我看看如何
src/app/reactive-form/reactive-form.component.html:47:48 - error TS2531: Object is possibly 'null'. src/app/reactive-form/reactive-form.component.ts(Src/app/reactive-form/reactive-form.component.html:47:48-错误TS2531：对象可能为‘Null’。Src/app/reactive-form/reactive-form.component.ts)
类型‘AbstractControl’上不存在属性‘Controls’。
angularjs - ng-src 与 src 的使用
这个tutorial演示如何使用指令 ngSrc 而不是 src : 他们要求: Replace the ng-src directive with a pl
javascript - 更改 src 并获取新 src 的高度
我正在创建一个包含多个图像的图库，您可以在其中单击一个小缩略图，然后将打开该图像的更大版本。打开后，如果您移动光标，图像将在 y 轴上跟随您。类似于 https://www.zara.com/es/
javascript - 文档 [] - src.charAt - src.length
文档[] src.charAt src.length 这三样东西是什么？我确定 pixState 会给我 1 或 0； var pixState = document[imgName].src.ch
javascript - Ng-src 更新但 src 在删除照片时不更新
问题背景: 我正在使用这个问题的解决方案:How to update AngularJS view when the value has not changed?所以在我看来我有: 当我更改照片时
php - 如何用正则表达式替换 data-src 的 src？
我在 html 中有整个页面，在输出之前我想将所有 img src 替换为 data-src我正在使用 return (preg_replace('~]*\K(?=src)~i','data-',
android - 差异 : android:src and tools:src?
Difference(s): android:src and tools:src? 如果有的话，什么时候使用 tools:src 而不是 android:src 是合适的？最佳答案如果您在运行时在
javascript - 如何检查脚本 src 匹配，然后重新分配 src
我需要检查每个 script 标签的 src 值，如果匹配，我想更改该脚本标签的 src 属性...像这样: var scripts = document.getElementsByTagName("
html - src 和 data-src 属性之间有什么区别？
使用 img 标签的 data-src 或 src 属性有什么区别和后果(好的和坏的)？我可以使用两者获得相同的结果吗？如果是这样，应该什么时候使用它们？最佳答案属性 src 和 data-src
image - Vue img src 路径与 :src 不一样
我使用 Vue。我尝试输出图像，当我使用 src 时效果很好，但当我使用 :src 时效果不佳。作品不起作用我试过但没有用 @ 在路径的第一个。 ~ 路径中的第一个。 ./ 在路径的第一个。
javascript - $(this).src 和 document.getElementById().src 之间的区别？
在当前项目中我正在使用 jQuery。我只是想知道为什么会这样， $('#homeIcon').hover(function(){ document.getElementById('homeI
Java 正则表达式匹配 src ="abc"或 src ='abc'
我在严格的 Java 环境中。所以这个问题并不像标题中那么简单，我不是要解决我遇到的问题，它更理论化，以获得更好的知识。我感兴趣的是用双引号或单引号匹配 src，但如果是双引号，它也必须用双引号结
mysql - SQL查询替换部分HTML(iframe src ="http://to iframe src="://)
我有一个 Joomla 2.5.28，现在使用 https 而不是 http。一些文章(很多)包含来自 Vimeo 的嵌入视频。最初，这些视频是使用http嵌入的，所以现在我的数据库中有字段int

首页

博学

6Ren·AI

商城

javascript 图像 src 更改事件(不是加载事件)