在另一个任何部分中完成页面加载后图像加载

时间:2017-12-18 16:18:04

标签: javascript html

首先,我的主要目的是在页面加载后加载图像。接下来,我不想在HTML代码中指定图像标记,因此我不需要提供任何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++) {

    }
});

2 个答案:

答案 0 :(得分:2)

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

&#13;
&#13;
import matplotlib.pyplot as plt
import numpy as np
import time

x = np.array([1, 2, 3])
y = np.array([1, 7, 5])

plt.ion()

fig = plt.figure()
ax = fig.add_subplot(111)
line1, = ax.plot(x, y, 'r-')
plt.show()


def update_points(new_x, new_y):
    global x, y, fig, line1, ax
    time.sleep(2)
    x = np.append(x, new_x)
    y = np.append(y, new_y)
    line1.set_xdata(x)
    line1.set_xdata(y)
    ax.relim()
    ax.autoscale_view()
    fig.canvas.draw()


update_points(np.array([4, 5, 6]), np.array([4, 5, 3]))
&#13;
window.addEventListener("load", function () {
  var imgs = document.querySelectorAll(".img_load")
  imgs.forEach(function (el) {
     var img = document.createElement("img");
     img.src = el.dataset.src
     el.appendChild(img);
  });
});
&#13;
&#13;
&#13;

答案 1 :(得分:0)

此脚本在整个页面完成加载后加载所有图像

每个带有类img_load的#a标签都会通过将data-scr作为图像源来加载图像

的JavaScript

<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>

HTML

<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>