Javascript 是否可以在页面的其他部分加载后克隆图像而不加载？

我面临一个简单的问题。假设我的用户通过一个简单的

加载大约150个图像。。等

当用户将鼠标悬停在其中一个图像上时。我希望在屏幕底部的一个小菜单中显示此

myimg thisimage.jpg

。现在，我将菜单中的src属性更改为：

$('#info-poster').attr("src","myimage-thisimage.jpg");

注意：

myimage thisimage.jpg

是当前悬停在图像上的图像

但是，当我这么做的时候。浏览器正在重新加载图像（因为有一点延迟）。既然用户已经使用克隆DOM元素的巧妙方法加载了图像，那么有没有办法绕过此加载

PS:浏览器图像缓存已启用。因此，缓存不是问题所在

---

编辑：我知道一种方法是创建300个图像元素并隐藏其中的150个。但是在一个有近500个图像的场景中（绝对可能），我必须创建大约1000个DOM元素，这将是一个很大的性能问题。

您应该让浏览器来处理缓存。 我建议您可以使用

，这样，如果您的浏览器希望加载图像的新副本，它会在用户将鼠标悬停在其他图像上之前加载。（如果它是一个小的/可接受的图像，用户可能需要在每次加载页面时下载它）

---

然后您可以简单地绑定

$（“img.bind event”）.on（“mouseenter”，function（）{$（“#info poster”）.show（）}）
这一行就是问题所在：

$('#info-poster').attr("src","myimage-thisimage.jpg");

浏览器正在重新加载图像，因为您重新设计了“src”属性（错误做法）

相反，您可以使用CSS选项显示/隐藏“myimage thisimage.jpg”。


由于您使用jQuery，我们可以使用以下方法：

你提到“克隆人”，我想你的意思不是

例如：（）


变量$dummy=$（“#dummy”）；
var$infoPoster=$（“信息海报”）；
var infoPosterHasLoaded=false；
$dummy.on（“mouseenter”，function（））{
//只添加一次src属性
如果（infoPosterHasLoaded==false）{
$infoPoster.attr（“src”http://www.ilovemaramures.com/wp-content/uploads/2012/05/Pasul-Prislop.jpg")
infoPosterHasLoaded=true；
}
$infoPoster.show（）；
});
$dummy.on（“mouseleave”，function（））{
$infoPoster.hide（）；
});

你可以查看更奇特的“隐藏/显示”



编辑-在我读了你的评论之后

如果要使用悬停元素的“数据图像”属性，请选中以下对象：，



新版本。
我相信jQuery
.clone（）
和
.append（）
函数可以满足您的需求。请参见下面的示例



$（函数（）{
$（'img#ToClone'）。单击（函数（）{
var imageClone=$（'#ToClone'）.clone（）；
var cloneDestination=$（“#CloneTo”）；
cloneDestination.append（imageClone）；
});
});

div
{
填充：2px；
背景：蓝色；
}
克罗内托分区
{
背景：绿色；
}
img{
高度：50px；
宽度：50px；
}

点击下方的红方块，将其克隆

克隆应该出现在这里

您可以将服务器上的映像请求转换为使用base64字符串响应，您可以将其存储在自己的缓存中

示例代码如下：

HTML

  <img id="image1Id" src="" />
  <input type="button" onclick='javascript:loadSomeThing("image1", "", "image1Id");' value="Load Image1" />

演示

您可以使用画布元素来显示缩略图，这样可以复制图像并局部缩放。在下面的代码片段中，我添加了两个画布，在第一个画布中，图像在保持纵横比的同时进行缩放（需要时，我使用字母框和柱形框技术）；在第二种情况下，图像被拉伸。我还在底部添加了另一个被忽略的图像，因为它没有数据图像属性

重要的是不要使用drawImage的缩放算法，因为当您大量缩小图像时，它会产生不平滑的结果。为此，请将画布的逻辑大小设置为与图像的自然大小相匹配。然后通过调用drawImage方法将图像复制到画布。最后将画布的显示大小设置为所需大小。这样，浏览器使用更好的算法缩放图像

以下是drawImage（）方法的中的一些突出引用：


您可以确保不会重新加载图像，并且必须使用图像的自然大小以避免使用drawImage进行缩放：

如果原始图像数据是位图图像，则通过过滤原始图像数据来计算在目标矩形中某一点绘制的值


浏览器决定使用哪种缩放算法。在写这篇文章的时候：Edge、Chrome和Firefox没有使用比双线性或最近邻算法更好的算法。这在未来可能会发生变化：

用户代理可以使用任何过滤算法（例如双线性插值或最近邻）


函数initCanvas（id、图像、自然宽度、自然高度）{
var canvas=document.getElementById（id）；
var ctx=canvas.getContext（“2d”）；
//设置画布的逻辑大小以匹配
//图像的自然大小，这种方式我们不使用
//drawImage的缩放算法（不好
//用于减少大图像，因为它会产生不平滑的结果）。
$（画布）.attr（“宽度”，自然宽度）；
$（画布）.attr（“高度”，自然高度）；
//复制图像：
ctx.drawImage（图像，0,0，自然宽度，自然高度）；
返回画布；
}
函数clearCanvas（id）{
var canvas=document.getElementById（id）；
var ctx=canvas.getContext（“2d”）；
clearRect（0,0，canvas.width，canvas.h
  <img id="image1Id" src="" />
  <input type="button" onclick='javascript:loadSomeThing("image1", "", "image1Id");' value="Load Image1" />

var imageArray = [];

function loadSomeThing(key, someUrl, elementId) {
  var imageData = imageArray[key];
  if (!imageData) {
    imageData = ajaxGetImageData(someUrl);
    imageArray[key] = imageData;
  }
  document.getElementById(elementId).src = imageData;
}

function ajaxGetImageData(url) {
  //Code to get base64 image string
  return "data:image/jpeg;base64,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";
}

<img data-src='myimg1.jpg' data-image='1' src='placeholder.jpg'>

<img data-image='1' src='blob:asdfasdfasdfasdfadfa'>

infoPosterEl.src = thisImageEl.src 
// update image src to an object url(e.g. "blob:") will not bother http comm.

// Fetch acutal image as blob 
// Create object url for the blob
// Update this <img> src to the object url