Hi, I am trying to initialize lazy after page load and have images load when visib

Hello <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-ur

Finally I found your problem! You didn't set a <code class="notransl

Base case Initialization issue about jquery.lazy HOT 5 CLOSED

dkern commented on May 25, 2024

Base case Initialization issue

from jquery.lazy.

Comments (5)

dkern commented on May 25, 2024

Hello @lawrencealexander10,

well, without seeing your code it's hard to tell what is wrong. But a common mistake is, that the images or elements arount have no default height set. For the borower this means, all images has a heihgt of 0px. So at the page load all images will fit in the whole viewport and Lazy will of course load anything then.

So please check this at first. If this is not working I need to have more details. A jsfiddle reproducing the behavior, page access or something ...

from jquery.lazy.

lawrencealexander10 commented on May 25, 2024

I created a gist with my code that exhibits the unusual behavior: https://gist.github.com/lawrencealexander10/ccc53772446f2cf239e990f9b2342db3
I tried it another computer and it exhibited the same behavior.

When attempting a jsfiddle with the same code in the gist, it worked to the spec so I am unsure what the issue is.

Thanks

from jquery.lazy.

dkern commented on May 25, 2024

Hmm, as you said, the code workes fine and I see no problems there. Have you ever tried to log the lazy loading and see if Lazy really loads all images at start? You could do it like this:

$(function() {
    $('.lazy').Lazy({
        afterLoad: function(element) {
            console.log(element.attr("src"));
        }
    });
});

from jquery.lazy.

lawrencealexander10 commented on May 25, 2024

Yes I have, and the console logs all elements immediately on page load. The only time this doesn't happen is when my viewport is on the bottom of the page on load. As I scroll up the images lazy load. I'm not sure why this occurs and the inverse doesn't

from jquery.lazy.

dkern commented on May 25, 2024

Finally I found your problem!

You didn't set a doctype in your page. Just add <!DOCTYPE HTML> to the first line and everything works fine! Without this jQuery can't detect the dimensions. And another hint. The <style> tag should be placed in <head>. Since CSS3/HTML5 it is possible to place those style tags everywhere too, but then it should be scoped once.

from jquery.lazy.

Recommend Projects

Base case Initialization issue about jquery.lazy HOT 5 CLOSED

Comments (5)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent