使用JavaScript优化Tumblr的加载以自定义样式

Question

-- Hi !

Reader, if you are not comfortable with Tumblr, please tell me, I will give more details!

I had some issues on my tumblr page with the default theme 'Optica'. When I post an embed SoundCloud track, here is what I get on the page:

photo below

NOTE: I have tried to change the theme, and I discovered that for some of them, everything goes fine, but there are a few others with the same bug

So I've tried to fix that, and I've located the origin of the bug in the styles sheet main.css:

.video .video-wrapper {
background: #111;
position: relative;
padding-bottom: 56%;
height: 0;
}

The thing is, that to publish an embed code, you have to do it through the "Video post" tool on your tumblr dashboard, which then allows to style the embed code with the .video-wrapper

Of course, what I want to do here is reducing the bottom padding, but if I do it that way, it will affect all "Video posts". So I used the existing class .soundcloud_audio_player in the iframe to "mark" this type of Video posts to be able to change the styling only of these Video posts.

I have simplified it, and here is what it looks like at the end in browser:

<article class="audio not-page post-70801339374 " data-post-id="post_70801339374">
<div class="post-wrapper clearfix">
    <section class="post">
        <figure>
            <div class="video-wrapper">
                <iframe class="soundcloud_audio_player" />
            </div>
        </figure>
        <section class="attribution-tags clearfix">
            <ul>
                <li>
                    <a href="http://hymced.tumblr.com/tagged/SoundCloud" class="tag">SoundCloud</a>
                </li>
                <li>
                    <a href="http://hymced.tumblr.com/tagged/Blutch" class="tag">Blutch</a>
                </li>
            </ul>
        </section>
    </section>
    <section class="panel" />
</div>
<article>

And now, what I have put between tags in my Tumblr customized HTML:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3");
google.setOnLoadCallback(function() {
    jQuery(function($) {
        $("iframe.soundcloud_audio_player").parents('div.video-wrapper').css("padding-bottom", "17%");
    });
});
</script>

I used jQuery because I didn't know anything about JavaScript or jQuery before today, and I thought it what simpler! But maybe I'm wrong. Anyway, PROBLEM #1 FIXED!

NOW, PROBLEM #2

When the page is loading, the former styling (before than JS intervene) appears for 1 or 2 sec (with my bandwidth anyway!) and it's quite ugly:

photo below

I've looked a bit here http://www.memodev.com/wiki/Optimiser_un_site_Web and here https://developers.google.com/speed/docs/best-practices/rules_intro?hl=fr-FR

But I can't find how to improve the loading, and I hope some of you guys can :)

PageSpeed test below

Answer 1

It sounds like you just want to hide the fact that styles are changing after the page loads - So, this will do the trick very basically :

Add this to your HTML: <div id="screen"></div>

Add this to your CSS :

div#screen {
     position:fixed;
     height:100%; width:100%; 
     background:white;
     z-index:999;
 } 

You might not need the z-index There are lots of loaders you can use in place of this, if you would like -

and then, In JQuery:

$(document).ready(function(){ 
    // Here, you insert that code that adds the padding to your iframe, and whatever else
    // you need to do to prepare the page... 
    $("#screen").hide();   // this will display your page - ! 
});