Idea: Support for lazy loading of iframes

Comments

10 comments

  • Official comment
    Avatar
    Richard van der Velde

    Hi Adrian,

    Since lazy loading also likes using data-src, you can also use data-cookieblock-src instead.
    Our auto blocker does the same thing, specifically to avoid clashing with lazy loaders.

    Comment actions Permalink
  • Avatar
    Mukesh Panda

    If it's possible, build the iframe after the page is loaded and then render the iframe's content, this would improve the initial page loading seed. However, I think this would impact the performance of the page while the iframe loads the additional content.

    I have also faced the same issue before when I have implemented this on my website. I have applied the same technique to improve page speed. 

    0
    Comment actions Permalink
  • Avatar
    Adrian

    We have managed to implement this by ourselves (thanks cookiebot for nothing).

    By removing the "data-cookieconsent" attribute from the <iframe> tag(s) and then, via Cookiebot's events, we have added an identifier (class name) to the <iframe>s only when the specific Cookie category was accepted. Afterwards, we re-initialized the lazy load functionality. This way, we have implemented consent for YouTube videos while also having them loading only when needed, and not directly after consent is given (which in our case is directly when the page loads, as we use Cookiebot as a Cookie wall -- users cannot continue unless they consent).

     

    You can find below our approach, for whomever might also be interested in this.

    0
    Comment actions Permalink
  • Avatar
    Adrian
    // hook on the "CookiebotOnAccept" event
    // (this event triggers when the user accepts the use of cookies, as well as if the user has consented at an earlier visit)

    window.addEventListener('CookiebotOnAccept', function (e) {

    // check if Marketing cookies have been accepted
    if (Cookiebot.consent.marketing) {

    // add an identifier to all iframes
    // (which should not have "src" attributes anymore, but "data-src" ones)
    $('iframe[data-src]').addClass('{your_identifier}');

    // next, re-initialize your lazy loading script
    // (first, also add {your_identifier} to the list of selectors in your lazy loading script setup)
    }
    }, false);
    0
    Comment actions Permalink
  • Avatar
    jhonhenkee

    Hi,Since lazy loading also likes using data scr, you can also use data cookies block scr instead.
    Our auto blocker does the same thing, specifically to avoid clashing with lazy loaders. Thanks!

    0
    Comment actions Permalink
  • Avatar
    kayakbuy

    Since lazy loading also likes using data-src, you can also use data-cookieblock-src instead.
    Our auto blocker does the same thing, specifically to avoid clashing with lazy loaders.

    0
    Comment actions Permalink
  • Avatar
    Alex Hales

    We have managed to implement this by ourselves (thanks cookiebot for nothing).

    By removing the "data-cookieconsent" attribute from the <iframe> tag(s) and then, via Cookiebot's events, we have added an identifier (class name) to the <iframe>s only when the specific Cookie category was accepted. Afterwards, we re-initialized the lazy load functionality. This way, we have implemented consent for YouTube videos while also having them loading only when needed, and not directly after consent is given (which in our case is directly when the page loads, as we use Cookiebot as a Cookie wall -- users cannot continue unless they consent). For further details, read Rise of Kingdoms Guide.

    1
    Comment actions Permalink
  • Avatar
    mendisz

    Hi there,

    It does actually seem to work.

    I was also facing the same problem and tried to solve it anyway! but this worked for my site.

    I added class=”lazyload” and then changed the src of the iFrame to data-src, and it seems to work. I’ll do some more testing and let you know.

    Thanks
    Mendisz

    0
    Comment actions Permalink
  • Avatar
    Alex Hales

    When I applied Class="lazyload" code then all images from my site has been removed. I am in very frustrating please tell me how I solve it immediately. 

    1
    Comment actions Permalink
  • Avatar
    Oscar Leo

    I added class=”lazyload” on my blog. After that I changed the src of the iFrame to data-src. Boom! It's working pretty good!

    0
    Comment actions Permalink

Please sign in to leave a comment.