There are pages (conditionally - height 1800px). At the very bottom of the page is a slider with images. At the moment its html-code is:

<div id="slider" class="slider_wrap"> <div id="slides"> <img src="/img/slider/1.jpg" /> <img src="/img/slider/2.jpg" /> </div> <span class="next"></span><span class="prev"></span> </div>

When you open the page, the first two images are loaded, the rest are loaded as you view the slider.

Attention, the question: how to make the slider begin its work only after the page is scrolled down and the field where the slider itself will appear on the screen? I mean, the first 2 pictures should be loaded only after they got to the slider itself.

    2 answers 2

    try to catch the position of the scroll .scrollTop () through the event .scroll () . And only when a certain position is reached, launch the slider.

    • Yes thank you. That's exactly what I did already. - M03G
     window.onscroll = function() { var pageY = window.pageYOffset || document.documentElement.scrollTop, heightScreen = window.innerHeight + pageY; sliderTopY = $("#slides").offset().top; if ((heightScreen > (sliderTopY - sliderTopY * 0.05)) && loadSlider) { loadSlider = 0; } }