Javascript预渲染图像未显示答案

【问题标题】：Javascript pre-render Image not being displayedJavascript预渲染图像未显示
【发布时间】：2012-12-20 10:33:05
【问题描述】：

我目前正在为 ipad 开发一个 html 页面，其中包含用于各种内容的 css3 过渡滑块。

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

有什么方法可以让浏览器呈现它们，而不是在初始页面请求时显示它们，以防止图像上出现卡顿的滑动效果？

/编辑：

我使用的滑块：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');
    });
}

【问题讨论】：

页面结构如何？请分享一些代码。
请显示您用于预加载图像的代码。

标签： javascript image rendering invisible

【解决方案1】：

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

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

});

【讨论】：

【解决方案2】：

一般技术是将它们设置为visibility: hidden（内联样式以确保在下载任何外部 CSS 之前应用它） - 并在 image.onload 处理程序上将其设置为 visibility: visible。

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

【讨论】：

这对我不起作用。要是这么简单就好了。
效果不佳。我现在要做的是让滑块滑动 vom 开始结束并再次返回，同时有一个透明层，直到它再次开始。感谢迄今为止的努力！