Question

- 嗨！

读者，如果你对Tumblr不满意，请告诉我，我会提供更多细节！

我的tumblr页面上有一些问题，默认主题为“Optica”。当我发布一个嵌入的SoundCloud音轨时，这就是我在页面上看到的内容：

下面的照片

注意：我试图改变主题，我发现对于其中一些主题，一切都很顺利，但还有一些其他人有同样的错误

所以我试图修复它，我在样式表main.css中找到了bug的来源：

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

问题是，要发布嵌入代码，您必须通过tumblr仪表板上的“视频帖子”工具来完成，然后允许使用.video-wrapper

设置嵌入代码的样式。

当然，我想在这里做的是减少底部填充，但如果我这样做，它将影响所有“视频帖子”。所以我使用iframe中现有的类.soundcloud_audio_player来“标记”这种类型的视频帖子，以便能够仅更改这些视频帖子的样式。

我简化了它，这就是浏览器最后的样子：

<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>

现在，我在Tumblr自定义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>

我使用jQuery是因为在今天之前我对JavaScript或jQuery一无所知，我觉得它更简单！但也许我错了。无论如何，问题＃1固定！

现在，问题＃2

当页面加载时，前一个样式（在JS介入之前）出现1或2秒（无论如何我的带宽！）并且它非常难看：

下面的照片

我在这里看了一下 http://www.memodev.com/wiki/Optimiser_un_site_Web 和这里 https://developers.google.com/speed/docs/best-practices/rules_intro?hl=fr-FR

但是我找不到如何改善装载，我希望你们中的一些人可以：）

下面的PageSpeed测试

Answer 1

听起来你只想隐藏页面加载后样式发生变化的事实 - 所以，这将基本上做到这一点：

将此添加到您的HTML： <div id="screen"></div>

将此添加到您的CSS：

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

您可能不需要z-index 如果您愿意，可以使用很多loaders来代替这个 -

然后，在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 - ! 
});

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

1 个答案: