CODEWITHSUNDEEP
javascript
Ching Ching
Ching Ching

Reputation: 1049

javascript load image on scroll

i want to build my own lazy images using only javascript.

so far, this is my code :

<img src="images1.jpg" data-src="images2.jpg" />

var body = document.body,
    html = document.documentElement;

var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight),
    screen = screen.height; 
    img = document.getElementsByTagName("img");

    window.addEventListener("scroll", function() {

    for(var i = 0; i < img.length; i++) {

        if (img[i].clientHeight >= height - screen) {

        var data = img[i].getAttribute("data-src");
        img[i].setAttribute('src','');
        img[i].setAttribute("src", data);
        }
    }
    });

the problem is, the image data-src did not execute into src attribute on scroll event.

i want it to execute when the images about 200px before the viewport.

how to doing this? and what's wrong with my code? is it possible that my if condition not correct?

Upvotes: 0

Views: 643

Answers (3)

Medet Tleukabiluly
Medet Tleukabiluly

Reputation: 11930

Checkout source of lazy loading plugin from todd motto. It's pretty useful view others implementation.

Upvotes: 0

Dhyey Shah
Dhyey Shah

Reputation: 232

If you can mention the dimensions of the images, it would make more sense. However I am still trying to attempt to answer your question as I think the scroll event in your code wasn't triggering at all. Try making your img tag slightly below the viewport so that scroll works

Also for the calculation use window.innerHeight as it gives right height of the viewport subtracting height of the addressbar etc.

<img src="images1.jpg" data-src="images2.jpg" style="position:absolute;top:1169px"/>
<script>
    var body = document.body,
        html = document.documentElement;

    var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight),
        screen = window.height;
        img = document.getElementsByTagName("img");

    window.addEventListener("scroll", function() {
        console.log("Checking if the scroll event is triggered...");
        for(var i = 0; i < img.length; i++) {

            if (img[i].clientHeight >= height - screen) {
                var data = img[i].getAttribute("data-src");
                img[i].setAttribute('src','');
                img[i].setAttribute("src", data);
            }
        }
    });
</script>

OR

try using events like mousewheel and/or DOMMouseScroll which does not expect body to be actually scrollable.

Hope this helps!

Upvotes: 0

rafaelcastrocouto
rafaelcastrocouto

Reputation: 12161

Your code works just fine, you need to add }); at the end, though. 

var body = document.body,
    html = document.documentElement,
    height = Math.max(
               body.scrollHeight, 
               body.offsetHeight, 
               html.clientHeight, 
               html.scrollHeight, 
               html.offsetHeight),
    screen = screen.height; 
    img = document.getElementsByTagName("img");

window.addEventListener("scroll", function() {  
  for(var i = 0; i < img.length; i++) {
    if (img[i].clientHeight >= height - screen) {
      var data = img[i].getAttribute("data-src");
      img[i].setAttribute('src', data);
    }
  }
});
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-1&w=350&h=250" 
data-src="https://placeholdit.imgix.net/~text?txtsize=63&bg=63FF47&txtclr=ffffff&txt=Image-1&w=350&h=250" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-2&w=350&h=250" 
data-src="https://placeholdit.imgix.net/~text?txtsize=63&bg=63FF47&txtclr=ffffff&txt=Image-2&w=350&h=250" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-3&w=350&h=250" 
data-src="https://placeholdit.imgix.net/~text?txtsize=63&bg=63FF47&txtclr=ffffff&txt=Image-3&w=350&h=250" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-4&w=350&h=250" 
data-src="https://placeholdit.imgix.net/~text?txtsize=63&bg=63FF47&txtclr=ffffff&txt=Image-4&w=350&h=250" />

I don't get what you mean by "200px before the viewport". Could you explain it better? If you don't want all images to change at the same time, should consider the offetTop of each image and the scrollTop position. http://jsbin.com/xexeho/edit?html,js,output

Upvotes: 1

Related Questions