WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. Alexander Barwig
    Member
    Posted 1 year 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!

    Regards
    Alex

    http://wordpress.org/extend/plugins/bj-lazy-load/

  2. Bjørn Johansen
    Member
    Plugin Author

    Posted 1 year 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
    Member
    Posted 1 year 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.

    See
    https://github.com/artzstudio/jQuery-Sonar/blob/master/jquery.sonar.js
    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

About this Topic

Tags