Фон CSS LazyLaoding (не теги HTML <img>)
Мне удалось выяснить, как отложить загрузку изображений на моем веб-сайте, где изображения вызываются в 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/
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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.info('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>@cactusboat Я обновил свой ответ полным примером. Вы должны удалить весь фон из CSS. И управляйте отзывчивым поведением с помощью javascript. Надеюсь, это поможет.
@Mpdhamed Я изменил некоторые файлы js. В основном все идентификаторы от 700px до 1200. Я также поменял местами следующее: var src1 = product2.getAttribute ('data-src-large'); ... и var src1 = product1.getAttribute ('data-src-small'); ... (все они). Он работает нормально, однако иногда, когда вы изменяете размер окна, изображения, которые должны были стать меньше, обрезаются, так как они находятся в своем большом состоянии в маленьком кадре изображения. Обновленный код: jsfiddle.net/Shololom/wbgn210y/27 Что-то мешает правильной работе JS?
Я не понимаю, чего ты хочешь добиться. Вы хотите показывать маленькие изображения, когда экран большой, и большие изображения, когда экран маленький?
Или вы имеете в виду, что на маленьком изображении перейти на новую строку?
если да уберите маржу с .top-menu-button
Привет, Мохамед, спасибо за ответ. Что меня смущает, так это то, что в моем CSS уменьшенная версия изображения вызывается, если экран большой, и большая адаптивная версия изображения вызывается, когда экран меньше. Я не понимаю, как будет работать вышеуказанный метод. Было бы слишком много спрашивать, можете ли вы отредактировать пример проекта, который я создал для этого вопроса? -С уважением