Изображение появляется перед текстом - PullRequest
Новая
       0

Изображение появляется перед текстом

0 голосов
/ 05 апреля 2020

Когда мой сайт загружается, изображение всегда появляется сразу (даже если оно все еще загружается), однако я хочу, чтобы оно появлялось точно в то же время, что и текст, чтобы оно выглядело так, как будто оно загружается одновременно. Это код, который я использовал для создания того, что я вижу

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;

HTML

<!DOCTYPE HTML>

<HTML lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/CSS" href="dropdownmenu.css">
<link rel="stylesheet" type="text/CSS" href="rainbowheading.css">
<link rel="stylesheet" type="text/CSS" href="loadingcss.css">
<link rel="stylesheet" type="text/CSS" href="image.css">
<script src="loading.js"></script>
<title> North Macedonia </title>
       <script src="js/jquery.js"></script> 
<div class="container">
  <h1 class="rainbow"> The pearl of the Balkans: Macedonia </h1>
  <div class="navbar">
  <a href="index.html">Home</a>
  <a href="#news">Macedonian Dispora</a>
  <a href="cities.html">Cities</a>
  <div class="dropdown">
    <button class="dropbtn">History
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Ancient History</a>
      <a href="#">Ottoman Period</a>
      <a href="#">Yugoslav Period</a>
      <a href="#">Modern History</a>
    </div>
  </div>
</div>
</head>




    <script src="loading.js"></script>
    <link rel="stylesheet" type="text/css" href="loadingcss.css" />
  </head>
  <body>
    <div class="loader-wrapper">
      <span class="loader"><span class="loader-inner"></span></span>
    </div>

  <div style="display:none;" id="myDiv" class="animate-bottom"></div>
    <div>
      <h2>Welcome to my website about my country Macedonia (Makedonija)</h2>
      <p>Macedonia officially the Republic of North Macedonia, is a country in the Balkan Peninsula in Southeast Europe. It gained its independence in 1991 as one of the successor states of Yugoslavia. A landlocked country, North Macedonia has borders with Kosovo to the northwest, Serbia to the northeast, Bulgaria to the east, Greece to the south, and Albania to the west. It constitutes approximately the northern third of the larger geographical region of Macedonia. The capital and largest city, Skopje, is home to roughly a quarter of the country's 2.06 million inhabitants. <br>
        The majority of the residents are ethnic Macedonians, a South Slavic people. Albanians form a significant minority at around 25%, followed by Turks, Romani, Serbs, Bosniaks, and Aromanians.</p>
    </div>
      <img class="image1" src="./images/ohridimage1.jpg" alt="Smiley face">
  </div>

1 Ответ

0 голосов
/ 05 апреля 2020

Чтобы загрузить изображение в фоновом режиме и показать его, когда закончите с другими элементами, такими как текст, вам нужно загрузить изображение в объекте изображения следующим образом: 

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

Как только вы установите sr c изображение будет загружено, но никто его не увидит. Это заставит браузер загрузить изображение в фоновом режиме и кэшировать его. Так что теперь, когда вы установите этот точный sr c для элемента 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');
    });
}

Так что теперь вы не должны сначала устанавливать sr c на изображении, но вы должны сделать это: 

$('.my-images').whenImagesLoaded(function () {
    // Hide loading text here and show images! 
});

JSFiddle

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...