2

我目前正在为 ipad 开发一个带有 css3-transition 滑块的 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: 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');        
    });
});
于 2012-12-20T10:37:35.607 回答