Мне удалось выяснить, как отложить загрузку изображений на моем веб-сайте, где изображения вызываются в HTML с помощью тегов <img>. Для этого я использовал этот пакет на GitHub. Однако у меня возникли проблемы с выполнением то же самое и с CSS background:.

-Некоторые сведения по проблеме:

Вчера вечером я создал панель меню изображения, которая изменяет размер / положение изображения в зависимости от экрана браузера (ссылка предоставлена) . Все изображения в этой строке меню изображения вызываются через background: в CSS (а не через тег <img>).

-Теперь к моему вопросу:

Как я могу отложить загрузку изображений background: в css этого проекта, который я начал. На своем веб-сайте я бы просто изменил <img src=""> на <img data-src="" (в HTML) после выполнения инструкций по ссылке Github выше, и изображения будут загружаться по мере их появления на экране .

-Причина этого:

Это сделано исключительно для ускорения работы веб-сайта и предотвращения одновременной загрузки всех изображений. Мы будем благодарны за любые другие советы, которые помогут избежать потери времени загрузки, или любые другие возможные способы решения этой проблемы.

-Примечание: я использовал background:, а не background-image: для этого проекта.

Если вы пропустили ссылку на мой проект: https://jsfiddle.net/Shololom/ wbgn210y /

5
cactusboat 20 Май 2018 в 06:59

1 ответ

Лучший ответ

Из предоставленного вами проекта Github:

Ленивые фоновые изображения

Когда использовать: ваши изображения устанавливаются как фоновые изображения CSS вместо реального img, но вы все равно хотите их лениво загружать.

HTML

<div class="lazy" data-src="../img/44721746JJ_15_a.jpg"></div>

Javascript

var myLazyLoad = new LazyLoad({
    elements_selector: ".lazy"
});

Вот и все. Когда элемент, выбранный с помощью elements_selector, не является img или iframe, LazyLoad помещает изображение, найденное в атрибуте data-src, в фоновое изображение элемента.

Изменить: Полный пример:

// Get products
var product1 = document.getElementById('product1');
var product2 = document.getElementById('product2');
var product3 = document.getElementById('product3');
var product4 = document.getElementById('product4');
var product5 = document.getElementById('product5');

// Create Lazy loader
var myLazyLoad = new LazyLoad({
    elements_selector: ".lazy"
});

// Load images in a responsive way
function loadImgs() {
	console.log('Loading images ...');
  	var src1;
    var src2;
    var src3;
    var src4;
    var src5;    
	if(window.matchMedia("only screen and (max-width:700px)").matches) {
      /* The viewport is lesser than 700 pixels wide */
  	src1 = product1.getAttribute('data-src-small');
    src2 = product2.getAttribute('data-src-small');
    src3 = product3.getAttribute('data-src-small');
    src4 = product4.getAttribute('data-src-small');
    src5 = product5.getAttribute('data-src-small');      
   
  } else {
  	src1 = product1.getAttribute('data-src-large');
    src2 = product2.getAttribute('data-src-large');
    src3 = product3.getAttribute('data-src-large');
    src4 = product4.getAttribute('data-src-large');
    src5 = product5.getAttribute('data-src-large');   
  } 

  // Set the data-src for lazy loader
  product1.setAttribute('data-src', src1);
  product2.setAttribute('data-src', src2);
  product3.setAttribute('data-src', src3);
  product4.setAttribute('data-src', src4);
  product5.setAttribute('data-src', src5); 
    
  // Tell lazy loader that the data should be re-processed
  product1.removeAttribute('data-was-processed');
  product2.removeAttribute('data-was-processed');
  product3.removeAttribute('data-was-processed');
  product4.removeAttribute('data-was-processed');
  product5.removeAttribute('data-was-processed');   
  
  // Tell lazy loader to update
  myLazyLoad.update();
}

// Load images first time
loadImgs();

// Reload images when window is resized
var lastWindowSize = window.innerWidth;
window.onresize = function(event) {
	var currentWindowSize = window.innerWidth; 
	if((lastWindowSize <= 700 && currentWindowSize > 700) || (lastWindowSize > 700 && currentWindowSize <= 700)) {
  	loadImgs();
  }
	
  lastWindowSize = currentWindowSize;
};
.top-header-settings {
  font-family: inherit;
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 45px;
  padding: 45px 0 0;
  color: #524949;
  border-top: 1px solid #ddd;
}

.top-menu-wrap {
  margin: 0 auto;
  position: relative;
  ;
  background-color: #343434;
}

.top-menu-inner {
  max-width: 1200px;
  height: 260px;
  /*/background-color:#343434;/*/
  margin: 0 auto;
}

.top-menu-innerr {
  max-width: 1161px;
  height: 200px;
  margin: 0 auto;
  padding-top: 20px;
}

.top-menu-button {
  width: 220px;
  height: 220px;
  display: inline-block;
  margin: 5px;
  text-align: center;
  font-size: 16px;
  opacity: .6;
  transition: 0.3s;
}

.top-menu-button:hover {
  opacity: 1
}

@font-face {
  font-family: 'roboto';
  src: url(https://fonts.googleapis.com/css?family=Roboto);
}

.top-menu-text {
  width: 125px;
  height: 30px;
  /*/background-color:red;/*/
  margin: 150px auto;
  text-align: center;
  color: white;
  font-family: 'roboto';
  font-size: 20px;
  background: #343434;
  -khtml-opacity: .50;
  -moz-opacity: .50;
  -ms-filter: ”alpha(opacity=50)”;
  filter: alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity: .60;
  border-style: solid;
  border-width: 1px;
  line-height: 25px;
}

.coming-soon-top {
  width: 75px;
  height: 20px;
  font-size: 10px;
  text-align: center;
  color: white;
  position: absolute;
  font-family: 'roboto';
  background: #c78f8f;
}

@media only screen and (max-width:1200px) {
  .top-menu-wrap {
    margin: 0 auto;
    position: relative;
    background-color: #343434;
  }
  .top-menu-inner {
    max-width: 1200px;
    min-height: 340px;
    /*/ background-color:#343434;/*/
    margin: 0 auto;
  }
  .top-menu-innerr {
    max-width: 80%;
    min-height: 200px;
    width: 80vw;
    margin: 0 auto;
    /*/background:red;/*/
  }
  .top-menu-button {
    width: 80vw;
    height: 80vw;
    max-width: 1080px;
    max-height: 1080px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    float: left;
    margin: 1px auto;
    text-align: center;
    font-size: 16px;
    margin: 4px 2px;
    opacity: 1;
    transition: 0.3s;
    color: white;
  }
  .top-menu-button:hover {
    opacity: .6
  }
  #product2 {
    /*background: url("http://via.placeholder.com/1080x1080");*/
    /*/background:#c77f7f;/*/
    width: 80vw;
    height: 80vw;
    max-width: 1080px;
    max-height: 1080px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  #product1 {
    /*background: url("http://via.placeholder.com/1080x1080");*/
    /*/background:#c77f7f;/*/
    width: 80vw;
    height: 80vw;
    max-width: 1080px;
    max-height: 1080px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  #product3 {
    /*background: url("http://via.placeholder.com/1080x1080");*/
    /*/background:#c77f7f;/*/
    width: 80vw;
    height: 80vw;
    max-width: 1080px;
    max-height: 1080px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  #product4 {
    /*background: url("http://via.placeholder.com/1080x1080");*/
    /*/background:#c77f7f;/*/
    width: 80vw;
    height: 80vw;
    max-width: 1080px;
    max-height: 1080px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  #product5 {
    /*background: url("http://via.placeholder.com/1080x1080");*/
    /*/background:#c77f7f;/*/
    width: 80vw;
    height: 80vw;
    max-width: 1080px;
    max-height: 1080px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
  .top-menu-text {
    /*/width:125px;/*/
    /*/height:30px;/*/
    width: 30vw;
    height: 10vw;
    /*/background-color:red;/*/
    margin: 150px auto;
    text-align: center;
    color: white;
    font-size: 5.9vw;
    line-height: 9vw;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.7.1/lazyload.min.js"></script>
<div class="top-menu-warp">
  <div class="top-menu-inner">
    <div class="top-menu-innerr">


      <a href="#">
        <div id="product1" class="top-menu-button lazy" 
          data-src-small="http://via.placeholder.com/220x220"
          data-src-large="http://via.placeholder.com/1080x1080">

          <div class="coming-soon-top">
            Most Popular
          </div>

          <div class="top-menu-text">
            Text
          </div>
        </div>
      </a>

      <a href="#">
        <div id="product2" class="top-menu-button lazy" 
          data-src-small="http://via.placeholder.com/220x220"
          data-src-large="http://via.placeholder.com/1080x1080">
          <div class="top-menu-text">
            Text
          </div>
        </div>
      </a>

      <a href="#">
        <div id="product3" class="top-menu-button lazy" 
          data-src-small="http://via.placeholder.com/220x220"
          data-src-large="http://via.placeholder.com/1080x1080">
          <div class="top-menu-text">
            Text
          </div>
        </div>
      </a>

      <a href="#">
        <div id="product4" class="top-menu-button lazy" 
          data-src-small="http://via.placeholder.com/220x220"
          data-src-large="http://via.placeholder.com/1080x1080">
          <div class="top-menu-text">
            Text
          </div>

        </div>
      </a>

       <a href="#">
        <div id="product5" class="top-menu-button lazy" 
            data-src-small="http://via.placeholder.com/220x220"
            data-src-large="http://via.placeholder.com/1080x1080">

          <div class="coming-soon-top">
            Coming soon
          </div>

          <div class="top-menu-text">
            Text
          </div>
        </div>
      </a>
    </div>

  </div>

Jsfiddle

3
Mohamed Ramrami 20 Май 2018 в 05:48