我想创建一个js文件，并且必须动态加载img标签
[英]I want to create a js file and have to load img tag dynamically
问题描述
function loadApp(){
var img = document.createElement("img");
img.src = "images/bmw-918407_1280.jpg";
src.appendChild(img);
}
window.onload = loadApp;
create a loadApp function that runs when your document is loaded. 
创建一个loadApp函数，该函数在文档加载时运行。 Inside the loadApp function, I want you to call a function: createImage(“images/imageName.png"). 在loadApp函数内部，我希望您调用一个函数：createImage（“ images / imageName.png”）。
how to do this ? 这个怎么做 ？
5 个解决方案
解决方案1
1 2019-04-02 10:40:55
You need also parent item selector. 您还需要父项选择器。
// parentSelector is the parent of your image element. Pass the parameter whatever you want.
// imgSource is the URL of your image. Make sure it's appropriate image link (not broken)
function createAndPush(parentSelector, imgSource){
var img = $('<img>');
img.attr('src', imgSource);
img.appendTo(parentSelector)
}
// Call in the onLoad or document ready.
createAndPush('#footer', 'https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45')
Calling function in jQuery onReady as follows: jQuery onReady中的调用函数如下：
$(document).ready(function(){
createAndPush('#footer', 'https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45')
})
Here is the Code Snippet 这是代码片段
// parentSelector is the parent of your image element. Pass the parameter whatever you want. // imgSource is the URL of your image. Make sure it's appropriate image link (not broken) function createAndPush(parentSelector, imgSource){ var img = $('<img>'); img.attr('src', imgSource); img.appendTo(parentSelector) } $(document).ready(function(){ createAndPush('#footer', 'https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45') })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="footer"> </div>
解决方案2
1 2019-04-02 10:45:39
you can use following arrow function 您可以使用以下箭头功能
window.onload= e => document.body.innerHTML += '<img src="http://lorempixel.com/630/150/">';
解决方案3
0 2019-04-02 10:37:51
For example like that: 例如这样的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
function addImage(src){
var newimg = document.createElement("img");
newimg.setAttribute("src", src);
document.getElementsByTagName("body")[0].appendChild(newimg);
}
window.onload = addImage("images/bmw-918407_1280.jpg");
</script>
</body>
</html>
解决方案4
0 2019-04-02 10:45:27
This is your javascript file below. 这是您的以下JavaScript文件。 Include it before the tag in your HTML 将其包括在HTML中的标记之前
function loadApp(){
let img = document.createElement("img");
img.src = "images/bmw-918407_1280.jpg";
document.getElementsByTagName('body')[0].appendChild(img);
}
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
loadApp();
}
}
解决方案5
0 2019-04-02 10:54:31
This is asynchronous downloading. 这是异步下载。 It should download image every 3 seconds. 它应该每3秒下载一次图片。
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (4 == xmlhttp.readyState) {
if (xmlhttp.status >= 200 && xmlhttp.status < 300) {
xmlhttp.open('GET', downloadUrl, true);
xmlhttp.responseType = 'blob';
} else {
console.log("http error: " + xmlhttp.status);
}
}
};
xmlhttp.timeout = 3000;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.