2

私は現在、さまざまなコンテンツのcss3-transitionスライダーを備えたiPad用のhtmlページを開発しています。

私が遭遇する問題は、まだレンダリングされていない次のページの画像が、コンテンツ領域にスライドしながらレンダリングされることです (プリロードされています)。

ブラウザに最初のページ要求で表示せずにレンダリングさせる方法はありますか?

/編集：

私が使用するスライダー：スライダー

構造は次のようなものです:

<body>
    <!-- wrapper -->
    <div>
        <!-- head -->
        <div class="head"></div>
        <!-- content area -->
        <div class="content">
            <div class="container">
                <div class="pagination"></div>
                <div class="slide-wrapper">
                    <div class="slide">
                        <!-- content with images here -->
                    </div>
                    <div class="slide"></div>
                    <div class="slide"></div>
                    <div class="slide"></div>
                    <div class="slide"></div>
                </div>
            </div>      
        </div>
        <!-- foot -->
        <div class="foot"></div>
    </div>
</body>

画像のプリロード:

function preload() {
    $('img').each(function(){
        $('<img/>')[0].src = $(this).attr('src');
    });
}
4

2 に答える 2

2

これにより、ブラウザはすべての画像をプリロードします

$('img').each(function(){
  var image = new Image();
  image.src = $(this).attr('src')    

});
于 2012-12-22T18:01:50.900 に答える
1

一般的な手法は、それらを次のように設定visibility: hiddenすることです (外部 CSS がダウンロードされる前でも確実に適用されるようにするためのインライン スタイル) - そしてそれをvisibility: visibleonimage.onloadハンドラーに設定します。

<img src="..." style="visibility: hidden" onload="this.style.visibility = 'visible';">

編集

$('img').each(function(){
    $(this).css('visibility', 'hidden');
    $('<img/>')[0].src = $(this).attr('src');
    $(this).load(function() {
        $(this).css('visibility', 'visible');        
    });
});
于 2012-12-20T10:37:35.607 に答える