如何在DOM上显示图像，因为他们在DOM加载后使用Jquery ?

Question

我正在尝试使用jquery添加一个模板到DOM。我等待所有的图像都加载到DOM上，然后在一个特定的div中获取所有的图像，向DOM添加一个模板(这是一个两张卡的网格)，然后使用.each来循环所有这些图像，并使用模板附加它们来创建多个两张卡的网格。

问题是它没有显示在DOM上。

代码如下:

<script>
function moveImages() {
var $gallery = $('#gallery');
// The template below will only have a 2 card grid. Hence an img counter.
var imgcount = 1;
// Initializing section counter for the 2 card grid. When img counter = 2, we increment it below so that we can have a new section ID to 
// append the next two images one by one.
var sectioncount = 0;

//Here is the HTMl template, as the imgcount crosses 2, we create a new section. notice the dynamic variable below for sectioncount.
var template = `<section class="card-grid-section section-${sectioncount}" loading="lazy">
<a class="card-grid-two-image">
<div>
<picture id="card-one-two-grid-section-${sectioncount}">
</picture>
</div>
</a>
<a class="card-grid-two-image">
<div>
<picture id="card-two-two-grid-section-${sectioncount}">
</picture>
</div>
</a>
</section>`;

//getting the html for the article-text id above.
var test = $('#article-text').find('p').each(function(index, value) {

//looping over all the children of each p tag below which are mostly span and img
var children = value.childNodes;
children.forEach(function(item, index1){

// if the tag is a span, then we append it to the div with id gallery.
if(item.tagName == "SPAN"){
$gallery.append(`<p><span>${item.innerHTML}<span></p>`);
console.log("ADDED SPAN TO GALLERY");
}

//if tag is an img
else if(item.tagName == "IMG"){
//I want to skip the first image here
if(imgcount > 0){
if(imgcount == 1){
//appending the template to gallery only if imagecount = 1.
$gallery.append(template);
//item here, is an image. I am adding the first image to the card one of the first grid(template). Notice the sectioncount dynamic variable below.
var $card1 = $(`#card-one-two-grid-section-${sectioncount}`);
//Appending image to card one
$card1.append(item);
} else if(imgcount == 2){
//if image count is 2, we are adding the the second image to template we created above.
var $card2 = $(`#card-two-two-grid-section-${sectioncount}`);
$card2.append(item);
//Since image count is 2, we want a new grid id. Hence the sectioncount++.
sectioncount++;
//since we can only add two images to grid. I am setting imgcount back to 0;
imgcount = 0;
} 
}
//Incrementing img count below.
imgcount++;
}
});
});

}

$(document).ready(function($) {
});
</script>

Answer 1

我想你应该这样写:

function gridTemplate(section) {
return $(`<section class="card-grid-section section-${section}" loading="lazy">
<a class="card-grid-two-image">
<div>
<picture id="card-one-two-grid-section-${section}"></picture>
</div>
</a>
<a class="card-grid-two-image">
<div>
<picture id="card-two-two-grid-section-${section}"></picture>
</div>
</a>
</section>`);
}

$(function () {
var imgcount = 1, sectioncount = 0;
$('#article-text p > *').each(function () {
if (this.tagName === "SPAN") {
$('#gallery').append(`<p><span>${this.innerHTML}<span></p>`);
} else if (this.tagName === "IMG") {
if (imgcount == 1) {
$('#gallery').append(gridTemplate(sectioncount));
$(`#card-one-two-grid-section-${sectioncount}`).append(this);
imgcount++;
} else {
$(`#card-two-two-grid-section-${sectioncount}`).append(this);
sectioncount++;
imgcount--;
}
}
});
});

(你真的应该减少那些与代码完全一致的注释——它们非常分散注意力。)