Javascript 在其他任意节中完成页面加载后加载图像_Javascript_Html

Javascript 在其他任意节中完成页面加载后加载图像

javascript html

Javascript 在其他任意节中完成页面加载后加载图像,javascript,html,Javascript,Html,首先，我的主要目标是在页面加载后加载图像。接下来，我不想在HTML代码中指定image标记，因此不需要提供任何src属性假设这是我的标签，它应该在页面加载后加载图像 <head> <p title="image_source" style="height:100px;width:100px;"></p> </head> var imagetag = document.createElement('img'); window.addEve

首先，我的主要目标是在页面加载后加载图像。接下来，我不想在HTML代码中指定image标记，因此不需要提供任何src属性

假设这是我的标签，它应该在页面加载后加载图像

<head>
    <p title="image_source" style="height:100px;width:100px;"></p>
</head>

var imagetag = document.createElement('img');
window.addEventListener('load', function() {
    for (var x=0; x < document.getElementsByTagName('p').length; x++) {

    }
});



var imagetag=document.createElement（'img'）；
addEventListener（'load'，function（））{
对于（var x=0；x

我个人会使用数据属性和类在页面加载后向页面添加图像

window.addEventListener（“加载”，函数（）{
var imgs=document.queryselectoral（“.img\u load”）
imgs.forEach（功能（el）{
var img=document.createElement（“img”）；
img.src=el.dataset.src
el.儿童（img）；
});
});


我个人会使用数据属性和类在页面加载后向页面添加图像

window.addEventListener（“加载”，函数（）{
var imgs=document.queryselectoral（“.img\u load”）
imgs.forEach（功能（el）{
var img=document.createElement（“img”）；
img.src=el.dataset.src
el.儿童（img）；
});
});


此脚本在整个页面完成加载后加载所有图像
每个#带有img#U load类的标签将通过将数据scr作为图像源来加载图像
javascript

addEventListener（'load'，function（））{
var parent=document.getElementsByClassName（'img_load'）；
对于（变量i=0；i

html

B
此脚本在整个页面完成加载后加载所有图像
每个#带有img#U load类的标签将通过将数据scr作为图像源来加载图像
javascript

addEventListener（'load'，function（））{
var parent=document.getElementsByClassName（'img_load'）；
对于（变量i=0；i

html

B
你的问题是什么？我建议你使用jQuery（如果可能的话）来完成更复杂的任务，比如这项任务。请不要回答几个minimagetag.setAttribute（imagesource）；这对我有用你的问题是什么？我建议你使用jQuery（如果可能的话）来完成更复杂的任务，比如这项任务。请不要回答几个minimagetag.setAttribute（imagesource）；这对meIs有效这和已经发布的答案有什么不同吗？（除了您将OP的p
标记更改为a
标记，并出于某种原因添加了css）稍有不同#p标签重叠…如果你能找到原因，请修复你的代码。我尝试了相对位置的样式，但没有起作用。这和已经发布的答案有什么不同吗？（除了您将OP的p
标记更改为a标记，并出于某种原因添加了css）稍有不同#p标签重叠…如果你能找到原因，请修复你的代码。我尝试了样式-位置-相对，但那不起作用我尝试了你的带有#p标记的代码，但我做不到，因为即使在我相对定位图像后，图像也会重叠…我不知道为什么会发生这种情况，但我使用了#a标记而不是#p，并且此代码可以工作…我还对你的代码做了一些更改，使其对我来说更简单：-）谢谢你，我收到了它…当你在p标签内创建一个新的img标签时，p标签的大小不会影响图像大小，所以我需要调整img标签的大小，而不是调整p标签的大小。只是一点代码我用#p标记尝试了你的代码，但我做不到，因为即使在我相对定位图像后，图像也会重叠…我不知道为什么会发生这种情况，但我使用了#a标记而不是#p，这段代码很有效…我还对你的代码做了一些更改，使我更容易：-）谢谢你，我得到了它…当你创建一个新的img标记时在p标签内，p标签的大小不影响图像大小，因此我需要调整img标签的大小，而不是调整p标签的大小。只是一点代码
<script>
window.addEventListener('load', function(){
var parent = document.getElementsByClassName('img_load');
for (var i = 0; i < parent.length; i++){
parent[i].appendChild(document.createElement('img')).setAttribute('src',
parent[i].getAttribute('data-src'));}})
</script>

<a class="img_load" data-src="image_source.png" 
style="height:00px;width:100px;position:relative;"></a>
<a class="img_load" data-src="image_source.jpg" 
style="height:100px;width:100px;position:relative;">b</a>