Support » Plugin: BJ Lazy Load » Image below emtpy placeholder block for non-js users

  • Hi Bjørn,

    thanks for your great plugin, love it!

    However, as I checked how my page looks for non-js users, I noticed that there´s an empty placeholder block at the size of the image and below follows the image. See here:
    Checked with my custom theme and twentyeleven.

    In order to fix this, I changed the output so that the noscript-tag will be printed BEFORE the img-tag and I assigned the noscript-img-tag “position: absolute;”.

    I´m sure there´s a more elegant way, but this worked for me. Do you have another idea fixing this Bjørn?

    Thanks in advance!


Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Bjørn Johansen


    Thank you for your feedback!

    The placeholder should have the class lazy-hidden which should have display:none.

    There could easily be specificity issues with CSS, and I guess this happened in your case.

    Thanks for your reply.

    Is the plugin shipped with the display attribute set to none for the lazy-hidden class? I can´t find the definition.

    Well but that was exactly what I did before, I set .lazy-hidden { display: none; } myself. In this case, it worked for non-js users just fine. BUT with js enabled, the lazy-image loading didn´t work and all images were loaded on page load. I traced it down to jquery.sonar which fires all image loading events on init. That is caused because offsetParent returns NULL if the display attribute is set to none.

    line 198.

    As offsetParent is NULL, elem.sonarElemTop is 0 which means that elem will be loaded immediately.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Image below emtpy placeholder block for non-js users’ is closed to new replies.