0

I have several SoundCloud iframes in a div. I am looking to load them only when the div is being seen. Currently I am loading them through a method that I found online which loads them one by one but still doesn't really do me justice.

What I am looking to do is to lower the load time on the site when its loaded. Since SoundCloud slows the website down this should make it faster.

Something close to eager loading for iframes.

Here is what I have so far :

HTML

<div class="gallery-cell">
    <div class="div-img-content">
        <div class="soundcloud-wrapper" id="236517781"></div>   
  </div>    
    <div class="div-icon-name">
   <img src="<?php bloginfo('template_url')?>/assets/gallery_content/icon-music.png" alt="">
    Terryl E
  </div>
</div>

JS

function loadSoundcloud () {
  $(".soundcloud-wrapper").each(function() {
    var URL = $(this).attr('id');
        var htm = '<iframe width="100%" height="200px" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + URL +'&amp;auto_play=false&amp;hide_related=false&amp;show_comments=false&amp;show_user=false&amp;show_reposts=false&amp;visual=true" frameborder="0"></iframe>';
        $(this).html(htm).fitVids().removeClass('.loading');
    });
}
3

1 Answer 1

1

With the encouragement of Melvita, I went with lazysizes and dropped my load time by half!. It also reduced the the initial request from 400 to 48.

Thanks so much.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.