javascript 中的引用已加载 <img>

Question

我使用轮播 jQuery 插件，它定义了一个必须包含 <img> 标签的容器。图像已加载并显示，轮播有效。

我现在正在实现鼠标悬停时的图像预览。为此，我创建了一个单独的 <div>，它与加载的图像一起显示。

问题是每次鼠标悬停在不同的图像上时，我都会以编程方式在 <div> 中创建一个新的 <img> 标记。这会导致大量不必要的服务器请求。

如何在图片预览中使用轮播中预加载的图片 div？

我不需要完整的解决方案，我会接受抽象的答案。

Answer 1

除了评论之外，这里还有我提到的 cloneNode 方法的工作示例。我没有理会容器的机制或通过鼠标悬停触发行为，只需单击现有图像即可。您还必须将图像源更改为已有的图像源。我正在测试这张图片的全分辨率版本：https://commons.wikimedia.org/wiki/File:SoundingRocketSamplePayload-02.jpg

<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
function byId(id,parent){return (parent == undefined ? document : parent).getElementById(id);}

window.addEventListener('load', onDocLoaded, false);
function onDocLoaded()
{
    byId('srcImg').addEventListener('click', myTest, false);
}

function myTest()
{
    var tgtElem = byId('srcImg');

    var clone1 = tgtElem.cloneNode(true);
    var clone2 = tgtElem.cloneNode(true);
    var clone3 = tgtElem.cloneNode(true);

    document.body.appendChild(clone1);
    document.body.appendChild(clone2);
    document.body.appendChild(clone3);
}
</script>
<style>
</style>
</head>
<body>
    <img id='srcImg' style='width: 256px' src='rockets.jpg'/>
</body>
</html>

javascript 中的引用已加载 <img>

Reference loaded <img> in javascript

javascript

image-preloader