图像交叉淡入淡出

发布日期 作者

今天要讲的 DHTML 技巧是 图像交叉淡入淡出 的一个流畅示例。整个页面的 Javascript 代码一开始就相当短，但仍有改进的空间。如果你查看 原始源文件，你会发现除了变量声明和 so_xfade 方法之外，几乎所有内容都可以简化为以下代码片段，使用 jQuery

$(document).ready(function(){
  $("head").append("<link href='xfade2.css' \
    rel='stylesheet' type='text/css'>");
  img = $("#imageContainer img").set("xOpacity",0).get();
  $("#imageContainer img:first").set("xOpacity",0.99).show();
  setTimeout(so_xfade,1000);
});

目前，在 jQuery 中似乎没有更优雅的方式来实现它，但我不能抱怨，因为与使用 DOM 方式相比，代码的可读性要高得多。

关于 “图像交叉淡入淡出” 的 10 个想法

  1. Bob Aman 在 说道：

    呵呵，你又用 jQuery 来翻译今天的技巧了。

    快速请求：页面第一次加载时，图像的长列表会闪烁一秒。这很丑陋，而且可能没有必要。也许可以改进原始脚本以消除它？

  2. John Resig 在 说道：

    我认为问题在于作者动态地将样式表写入头部 - 这意味着样式信息批次直到很久以后（在 DOM 树解析完成之后）才会被解释。如果我不得不推荐一个修复方法，那就是像往常一样将样式表放在头部，而不是动态地完成它。我还没有测试过这个理论，但它似乎是最合理的。

  3. Steve 在 说道：

    通过不将新的 CSS 文件写入页面，而是使用原始样式表隐藏图像，可以轻松地修复图像闪烁问题。
    但是，这样做的问题是，如果我在没有 JavaScript 但有 CSS 的用户代理中，文档会变得无法使用，因为用户只会看到第一张图像。

    所以，诀窍是如何避免未设置样式的内容闪烁，同时保持可访问性。可能可以使用 setTimeout 每隔几秒检查容器元素是否存在，如果它已成为 DOM 的一部分，则将它的 overflow 设置为 hidden，但即使这样也不一定每次都能成功。

    我将留给代码的使用者决定他们希望它如何运行。在 CSS 中添加 display:none; 并不困难，任何人都可以做到。

  4. Bob Aman 在 说道：

    Steve：setTimeout 技巧应该有效。我之前在其他设置中使用过它来实现这种效果，它是我最初认为解决这个问题的最佳方式。

  5. Johan Sundström 在 说道：

    我不得不同意 Bob 关于每天技巧帖子的说法；这真的太棒了。你接受请求吗？:-)

    我一直 拖延 实现一个更通用的 折叠/展开评论 框架，该框架可以用来整齐地压缩不同级别的内容。另一方面，我想这样的代码是你在任何库中都无法获得太多帮助的，因为它更多的是页面逻辑，而不是 DOM 操作。

  8. abba bryant 在 说道：

    我很好奇。有没有什么理由你不能使用 Dean Edwards 的
    Body onload 解决方案
    方法来调用一个函数，当 DOM 准备就绪时执行此操作，但比你当前使用的 Ready() 函数调用更早？

    类似于...(工作中，无法真正测试这个)

    function init() {
       if (arguments.callee.done) return;
       arguments.callee.done = true;
       img = $(“#imageContainer img”).set(“xOpacity”,0).get();
       $(“#imageContainer img:first”).set(“xOpacity”,0.99).show();
       setTimeout(so_xfade,1000);
    };
    if (document.addEventListener) {
       document.addEventListener(“DOMContentLoaded”, init, null);
    }
    // 针对 Internet Explorer //
    //@cc_on @//
    //@if (@_win32)
       document.write(“[script defer src=ie_onload.js][“+”/script]”);
    /@end @//
    /* 针对其他浏览器 */
    window.onload = init;

    ******

    其中 ie_onload.js 外部脚本只包含一行
    init();

    ******

    我对此没有任何功劳，并且想重申我是一个 JS 新手，无法从我目前的位置尝试这个。

    如果这确实有效...是否有希望有一个 DOMReady() 函数，可以为 IE/FF 实现这个功能，并在条件编译或 DOMContentLoaded 不可用时将代码传递给 Ready() 函数？

    Abba

    注意：条件编译注释是错误的。注释形式不允许它们。脚本块中的 [ 和 ] 字符也是如此。

  9. John Resig 在 说道：

    Abba：使用当前方法的优势在于它仍然非常非常快 - 而且它在所有现代浏览器（包括 Opera 和 Safari）中都很快。

    不过，为 IE 和 FF 包含自定义代码（以确保其有效）可能是一个好主意。我会牢记这一点。

  10. Phillip Oldham 在 说道：

    我尝试使用这段代码，但似乎在实际的淡入淡出效果开始之前，第一张图像和第二张图像之间出现了“跳跃”。有没有办法去除这个？