BJ Lazy Load
Image below emtpy placeholder block for non-js users (3 posts)

  1. Alexander Barwig
    Posted 2 years ago #

    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: http://i49.tinypic.com/8wk16t.jpg
    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!



  2. Bjørn Johansen
    Plugin Author

    Posted 2 years ago #

    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.

  3. Alexander Barwig
    Posted 2 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • BJ Lazy Load
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic