Image below emtpy placeholder block for non-js users

  • Alexander Barwig

    (@abarwig)


    11 years, 2 months 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/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author bjornjohansen

    (@bjornjohansen)

    11 years, 2 months 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.

    Thread Starter Alexander Barwig

    (@abarwig)

    11 years, 2 months 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.

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.