出现在文本之前的图像

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 () {

    // Here you can set the url that was loaded in the background here

    // 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) {

    let found = $(this);

    let counter = found.length;

    found.each(function (i, item) {

        let elem = $(item);

        let img = new Image();

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

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

               counter--;

               if (counter === 0 && callback) callback();

            });

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

        });

        img.src = elem.attr('data-src');

    });

}

所以现在你不应该在图像上设置 src 但你必须这样做：

$('.my-images').whenImagesLoaded(function () {

    // Hide loading text here and show images! 

});