Question

我目前正在为ipad开发一个带有css3-transition滑块的html页面，用于各种内容。

我遇到的问题是，下一页上的图像（尚未渲染）将在将它们滑动到内容区域时进行渲染（尽管它们已预先加载）。

有没有办法让浏览器渲染它们，而不是在初始页面请求时显示它们，以防止对图像产生卡顿的滑动效果？

/编辑：

我使用的滑块：slider

结构就像：

<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');
    });
}

Answer 1

这将强制浏览器预加载所有图像

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

});

Answer 2

一般技术是将它们设置为visibility: hidden（内联样式以确保在下载任何外部CSS之前应用它） - 并在visibility: visible处理程序上将其设置为image.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'); }); });

Javascript预渲染图像未显示

2 个答案: