Как на JQuery сделать чтобы при достижении блока с картинками их качество становилось лучше?

Question

Есть множество фотографий и их дубликаты с низким качество. При загрузки сайта будут использоваться в низком разрешении, а при достижении блока с картинками, картинки в плохом качестве должны замениться на картинки в хорошем качестве.

Answer 1

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

const section2 = document.querySelector('.section2');
const imgs = document.querySelectorAll('img[data-src]');

document.addEventListener('scroll', onScroll);

function onScroll() {
    const posTop = section2.getBoundingClientRect().top;
    if (posTop < window.innerHeight) {
        for (const img of imgs) {
            img.setAttribute('src', img.getAttribute('data-src'));
            img.onload = function () {
                img.removeAttribute('data-src');
            }
        }
        document.removeEventListener('scroll', onScroll);
    }
}

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

section.section1,
section.section2 {
    height: 120vh;
}
section.section1 {
    background-color: #2ecc71;
}

section.section2 {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: whitesmoke;
}

.imgs-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1200px;
}
.img-wrapper {
    padding: 10px;
    width: 400px;
    height: 400px;
}

img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

<body>
    <section class="section1">
    </section>
    <section class="section2">
        <div class="imgs-container">
            <div class="img-wrapper">
                <img src="https://letsart.ru/sites/default/files/movie/2652.jpeg"
                    data-src="https://img.wallscloud.net/converted/372597077-firewatch-E1zm-1920x1080-MM-100.jpg"
                    alt="">
            </div>
            <div class="img-wrapper">
                <img src="https://letsart.ru/sites/default/files/movie/2652.jpeg"
                    data-src="https://www.rabstol.net/uploads/gallery/main/588/rabstol_net_firewatch_01.jpg" alt="">
            </div>
            <div class="img-wrapper">
                <img src="https://letsart.ru/sites/default/files/movie/2652.jpeg"
                    data-src="https://img3.akspic.ru/crops/4/8/1/8/6/168184/168184-nacionalnyj_park_kaziranga-nacionalnyj_park_banf-josemiti-nacionalnyj_park-nacionalnyj_park_zajon-1920x1080.jpg"
                    alt="">
            </div>
        </div>
    </section>
    <script src="/script.js"></script>
</body>

БЛОГ НА HUSL

Как на JQuery сделать чтобы при достижении блока с картинками их качество становилось лучше?

Ответы (1 шт):