jQuery . IE上的快速图片幻灯片答案

【问题标题】：jquery . Fast image slide on IEjQuery . IE上的快速图片幻灯片
【发布时间】：2014-02-03 10:27:29
【问题描述】：

我正在尝试做一些关于如何使用我网站上的某些页面的视频。使用矢量编辑器，我一步一步地制作了图片，并希望将它们一个接一个地快速显示为 gif 文件之类的东西。

使用 jquery 的隐藏和显示方法。

$(firstimage).hide();
$(secondimage).show();

它在 chrome nad firefox 上运行良好，但即让它变慢并闪烁。我尝试将图像预加载到 chache 但没有运气。

我以前有人做过吗？

【问题讨论】：

标签： jquery image performance slide

【解决方案1】：

你有两个选择。选项一是为每个图像创建绝对定位的 div，并通过点击事件循环它们。

选项二是使用点击事件循环浏览每张图片。

选项一：

HTML

<div id="container">
    <div id="image-1" class="images">
        <img src="path/some_image-0.gif" width="150" />
    </div>
    <div id="image-2" class="images">
        <img src="path/some_image-1.gif" width="150" />
    </div>
     <div id="image-3" class="images">
        <img src="path/some_image-2.gif" width="150" />
    </div>
    <div id="image-4" class="images">
        <img src="path/some_image-3.gif" width="150" />
    </div>
</div>

CSS

#container {
    position:relative;
}

.images {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}

JavaScript

var total_images = 4; // Set this variable to total number of images
$(document).ready(function() {
   $('.images').hide();
   $('#image-1').show();
   $('.images').click(function() {
       var current_img = parseInt($(this).attr('id').split('-')[1]); // get current file number
       var new_img = current_img+1; // Increment current image number by one
       $('#image-' + current_img).hide();
       if(new_img > total_images){  // check if total has been reached
          new_img = 1;
       }
       $('#image-' + new_img).show(); // set new image source
  });
});

此选项会更快，因为您无需等待加载图像。这是此选项的 JSFiddle：http://jsfiddle.net/xsCVY/1/

选项二：

HTML

<div id="container">
    <div id="image">
        <img src="/path/some_image-0.gif" class="images" />
    </div>
</div>

JavaScript

<script>
    var total_images = 3; // Set this variable to total number of images
        $(document).ready(function() {
            $('.images').click(function() {
            var current_img = parseInt($(this).attr('src').split('-')[1]); // get current file number
            var new_img = current_img+1; // Increment current image number by one
            if(new_img > total_images){  // check if total has been reached
               new_img = 0;
            }
            $(this).attr('src','/path/some_image-' + new_img + '.gif'); // set new image source
 </script>

请记住，要使其正常工作，文件和文件路径中应该只有一个“-”，否则您必须拆分为不同的唯一字符，然后用数字 0 命名所有图像- 在“-”或您选择的其他字符之后的任何内容。

这是一个 jsfiddle：http://jsfiddle.net/PDzT8/

【讨论】：

【解决方案2】：

在我的情况下，问题是预加载图像以缓存。我不能使用绝对位置，因为我的父元素混合了位置，并且它将图像带到了父元素之外。我需要保持简单。卜感谢您的回复，我找到了今天有效的解决方案。我在幻灯片之前，第二次复制页面上所有使用过的图像，宽度为 1px，以便将它们缓存到内存中。不幸的是，所有 JavaScript 预加载方法都不起作用

【讨论】：