控制HTML中的图像加载顺序

<script>
window.onload = function() {
    var img1 = new Image();
    img1.onload = function() {
        document.getElementById("imageContainer").appendChild(img1);
    };
    img1.src = 'path/to/your/image1.jpg';

    var img2 = new Image();
    img2.onload = function() {
        document.getElementById("imageContainer").appendChild(img2);
    };
    img2.src = 'path/to/your/image2.jpg';
};
</script>
<div id="imageContainer"></div>

<img src="image1.jpg" loading="lazy" alt="Description">
<img src="image2.jpg" loading="lazy" alt="Description">

<!-- 优先加载的图像 -->
<img src="important-image.jpg" alt="Important Image">

<!-- 其他图像 -->
<img src="other-image1.jpg" alt="Other Image 1">
<img src="other-image2.jpg" alt="Other Image 2">

body::after {
  content: url(image1.jpg) url(image2.jpg);
  display: none;
}

function preloadImage(url) {
    var img=new Image();
    img.src=url;
}
preloadImage("image1.jpg");
preloadImage("image2.jpg");