出现在文本之前的图像

Question

当我的网站正在加载时，图像总是会立即出现（即使它仍在加载中），但是我希望它与文本出现的时间完全相同，以使其看起来像是同时加载。这是我用来制作我所看到的代码

Javascript

$(window).on("load",function(){

     $(".loader-wrapper").fadeOut("slow");

});

$.fn.srcLazy = function (src, callback) {

  let elem = $(this);

  let img = new Image();

  img.addEventListener('load', function () {

      elem.on('load', function () {

         if (callback) callback();

      });

      elem.attr('src', img.src);

  });

  img.src = src;

} 

$('#my-image-in-the-page').srcLazy("./images/ohridimage1.jpg", function () {

    // Show text here!

});

function showPage() {

  document.getElementById("loader").style.display = "none";

  document.getElementById("myDiv").style.display = "flex";

}

CSS（加载页面）

body {

  margin: 0;

  padding: 0;

  width:100vw;

  height: 100vh;

  background-color: #eee;

}

.content {

  display: flex;

  justify-content: center;

  align-items: center;

  width:100%;

  height:100%;

}

.loader-wrapper {

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

  background-color: #242f3f;

  display:flex;

  justify-content: center;

  align-items: center;

}

.loader {

  display: inline-block;

  width: 30px;

  height: 30px;

  position: relative;

  border: 4px solid #Fff;

  animation: loader 2s infinite ease;

}

.loader-inner {

  vertical-align: top;

  display: inline-block;

  width: 100%;

  background-color: #fff;

  animation: loader-inner 2s infinite ease-in;

}

@keyframes loader {

  0% { transform: rotate(0deg);}

  25% { transform: rotate(180deg);}

  50% { transform: rotate(180deg);}

  75% { transform: rotate(360deg);}

  100% { transform: rotate(360deg);}

}

@keyframes loader-inner {

  0% { height: 0%;}

  25% { height: 0%;}

  50% { height: 100%;}

  75% { height: 100%;}

  100% { height: 0%;}

CSS

#myDiv {

  margin: 0 50px 0 50px;

  display: none;

  text-align: center;

  justify-content: space-between;

  align-items: center;

}

.image1 {

  position: flex;

  right: 0px;

  top: 0px;

  z-index: -1;

  filter: grayscale(100%);

  style: float

  border: 3px solid #73AD21;

  width: 300px;

Answer 1

为了在背景中加载图像并在完成其他元素（如文本）后显示它，您需要在 Image Object 中加载图像，如下所示：var img = new Image();img.addEventListener('load', function () {&nbsp; &nbsp; // Here you can set the url that was loaded in the background here&nbsp; &nbsp; // to an actual `<img>` element. Browser uses cache now to load the image quickly.});img.src = 'image url here';一旦您设置了 src，图像就会被加载，但没有人可以看到它。这将强制浏览器在后台加载图像并缓存它。因此，现在当您将确切的 src 设置为 img 元素时，浏览器将使用缓存来显示图像，因此图像将快速加载您想要显示的任何内容。UPDATE --------您可以在 jquery 中以更好的方式做到这一点：假设您有一堆图像。然后不是设置他们src的data-src属性，然后在加载所有图像时使用这个功能做一些事情：这是 HTML：<img class="my-images" data-src="<image url 1>" /><img class="my-images" data-src="<image url 2>" /><img class="my-images" data-src="<image url 3>" /><img class="my-images" data-src="<image url 4>" />这是JS：$.fn.whenImagesLoaded = function (callback) {&nbsp; &nbsp; let found = $(this);&nbsp; &nbsp; let counter = found.length;&nbsp; &nbsp; found.each(function (i, item) {&nbsp; &nbsp; &nbsp; &nbsp; let elem = $(item);&nbsp; &nbsp; &nbsp; &nbsp; let img = new Image();&nbsp; &nbsp; &nbsp; &nbsp; img.addEventListener('load', function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elem.on('load', function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;counter--;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if (counter === 0 && callback) callback();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elem.attr('src', img.src);&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; img.src = elem.attr('data-src');&nbsp; &nbsp; });}所以现在你不应该在图像上设置 src 但你必须这样做：$('.my-images').whenImagesLoaded(function () {&nbsp; &nbsp; // Hide loading text here and show images!&nbsp;});