插入图像到通过JavaScript

HTML按需我有一个HTML5文档包含此元素：插入图像到通过JavaScript

<div id="imgContainer"></div>

文档载入，在用户登录，以及一些新的文本被加载并成功通过Ajax（显示使用jQuery）。过了一会儿（当用户点击时），应该在imgContainer -div中插入一个新图像。

我做这个jQuery的命令：

$("#imgContainer").html('<img src="newImage.png" alt="">');

文件newImage.png位于同一目录中的HTML文件和JavaScript文件。但它不会出现在浏览器窗口中。但它被正确插入到源代码中。我用浏览器的开发者工具（safari）检查了这一点。此工具不报告任何错误。但形象仍是看不见的。当我查看资源列表时，我看不到newImage.png。很明显，浏览器没有加载它。但为什么？

当我输入URL时，图像出现在浏览器窗口中。所以浏览器能够加载它。但是，当我修改html文档时不会。为什么？

我必须添加一些额外的代码给javaScript以告诉浏览器加载图像吗？如果是这样的话：你能告诉我这个代码吗？

编辑：

试一下：http://jsfiddle.net/YCs66/1/

来源

2014-07-05 Hubert Schölnast

你是代码看起来正确。您是否在开发人员工具的网络选项卡中看到图像文件（即浏览器是否实际请求图像）？ –

您是否确定您的新''元素正确地被注入页面？有可能你的脚本在容器元素加载之前执行，导致jQuery尝试将图像插入到不存在的元素中，是否将代码放置在DOM加载后运行的块中？在这里看看，你的代码在一个小提琴中工作正常：http://jsfiddle.net/TheBanana/LWpjr/ – Banana

@Banana有一个很好的观点，请记住，你的脚本应该包含在最后或你的HTML文档中，这可确保在开始与DOM进行交互之前将呈现HTML。同时请记住在使用jQuery时要充分利用文档准备功能。文档准备好被执行，直到所有的HTML已经被加载。 – jtorrescr

http://jsfiddle.net/dwebexperts/ZCL2U/1/

替换此

$("#imgContainer").html('<img scr="https://www.google.com/textinputassistant/tia.png" alt="">');

与此

$("#imgContainer").html('<img src="https://www.google.com/textinputassistant/tia.png" alt="">');

当我检查了你的小提琴，你给源属性为 “SCR”。

来源

2014-07-05 18:38:52 DWX

与您的代码的问题是，.html()方法只把在HTML，而无需实际解析为DOM element的属性。下面是解

HTML

<form name="myForm" action=""> 
<input type="button" value="click me" 
onclick="loadPic()"> 
</form> 
<div id="imgContainer"></div>

的Javascript

var loadPic = function() { 
    alert("loadPic started"); 
    $("#imgContainer").html('<img/>'); 
    $("img").attr("src", "https://www.google.com/textinputassistant/tia.png"); 
    alert("loadPic finished"); 
};

PLAYGROUND

注即执行.attr("src", ...)的<img/>是asynchronous函数。因此，在加载实际图像之前，会出现2 alert() s。

来源

2014-07-05 18:11:44 raunay

插入图像到通过JavaScript

回答

相关问题