Javascript集imgsrc

我可能错过了一些简单的东西，但当你读到的东西都不起作用的时候，我会觉得很烦人。我有一些图像，在动态生成页面的过程中可能会被多次复制。因此，显而易见的做法是预加载它，并始终使用该变量作为源

var searchPic;
function LoadImages() {
    searchPic = new Image(100,100);
    searchPic.src = "XXXX/YYYY/search.png";
    // This is correct and the path is correct
}

然后我使用

  document["pic1"].src = searchPic;

或

但是，当我将得到的图像作为图像的

src

进行查询时，FireBug中的图像从未正确设置

在IE中，我得到：

http://localhost:8080/work/Sandbox/jpmetrix/[object]

---

您应该使用以下方法设置src：

document["pic1"].src = searchPic.src;

或

应该工作

您需要设置

document["pic1"].src = searchPic.src;

---

searchPic本身就是您的图像（），您需要读取设置的src。

您不需要构建一个全新的图像。。。src属性只接受一个字符串值：-）

映像构造函数的实例不适用于任何地方。您只需设置

src

，图像就会预加载…就这样，节目结束了。您可以放弃该对象并继续

document["pic1"].src = "XXXX/YYYY/search.png"; 

这是你应该做的。您仍然可以使用图像构造函数，并在

searchPic

的

onload

处理程序中执行第二个操作。这确保在对真实的

img

对象设置

src

之前加载图像

像这样：

function LoadImages() {
    searchPic = new Image();
    searchPic.onload=function () {
        document["pic1"].src = "XXXX/YYYY/search.png";
    }
    searchPic.src = "XXXX/YYYY/search.png"; // This is correct and the path is correct
}

---

您的src属性是一个对象，因为您正在将src元素设置为您在JavaScript中创建的整个图像

试一试

---

哇！使用

src

时，还必须使用

searchPic

的

src

document["pic1"].src = searchPic.src

---

看起来更好

同样，解决这个问题的一种方法是使用

document.createElement

创建htmlimg并像这样设置它的属性

var image = document.createElement("img");
var imageParent = document.getElementById("Id of HTML element to append the img");
image.id = "Id";
image.className = "class";
image.src = searchPic.src;
imageParent.appendChild(image);

备注：一点是Javascript社区现在鼓励开发人员使用文档选择器，如

querySelector

、

getElementById

和

getElementsByClassName

，而不是document[“pic1”].

如果您正在使用，您可以通过

实用程序

功能更改

src

WinJS.Utilities.id("pic1").setAttribute("src", searchPic.src);

纯JavaScript创建

img

标记和

手动添加属性，

在pic1中设置src
或者使用getElementById

document.getElementById("pic1").src= searchPic.src;

j-Query将此存档，
如果页面是使用javascript动态生成的，那么在加载页面时，您将需要下载图像，这样在第一次创建需要它的元素时就不会出现令人讨厌的延迟。这就是创建图像对象的原因。你是对的，我的回答不太准确。我只是想说src属性接受一个字符串，并且完全忘记了预先创建
图像
的缓存优势。谢谢如果在onload（）中设置src，则会得到一个无限循环，该循环会影响服务器，即当src已加载时，它会调用onload。由于加载事件只能触发一次，因此还存在其他问题。您无法通过将源设置为相同的图像来再次启动它。您是对的，还有其他一些SO文章讨论了当“XXXX/yyy/search.png”是网络摄像头图片或服务器端发生更改时的奇怪缓存问题。他们建议我们将链接更改为“XXXX/yyy/search.png？t=”。您的解决方案是最好、最干净的，所以我将这两种方法结合在一起，使服务器受到重创。@DavidNewcomb-Yikes！这是个棘手的问题。在这种情况下，我想我应该放弃新的Image（）部分，而是使用两个实际的dom图像，比如双缓冲区。隐藏图像1，隐藏图像2。在间隔计时器中：在image1上设置src，在image1.onload中，显示1，隐藏2。间隔激发：在image2上设置src。在image2.onload中，显示2，隐藏1。等待，间隔触发：在image1上设置src。在image1.onload、show 1、hide 2-等中，document.getElementById（“pic1”）没有#这可能会有所帮助
document["pic1"].src = searchPic.src

var image = document.createElement("img");
var imageParent = document.getElementById("Id of HTML element to append the img");
image.id = "Id";
image.className = "class";
image.src = searchPic.src;
imageParent.appendChild(image);

WinJS.Utilities.id("pic1").setAttribute("src", searchPic.src);

var image = document.createElement("img");
var imageParent = document.getElementById("body");
image.id = "id";
image.className = "class";
image.src = searchPic.src;            // image.src = "IMAGE URL/PATH"
imageParent.appendChild(image);

document["#pic1"].src = searchPic.src;

document.getElementById("pic1").src= searchPic.src;

$("#pic1").attr("src", searchPic.src);