javascript - jQuery 颜色替换有时有效，有时无效

Question

我有一个小网页，你可以在这里找到它:http://gabrielaelona18.esy.es/

使用 CMS，用户可以替换“主题颜色”。因此，一个小脚本用十六进制代码 #16a085 替换了每种颜色，无论是 background-color、border-bottom-color 还是其他。那是代码:

$(function(){
        $('html').addClass('notransition');
        function colorReplace(findHexColor, replaceWith) {
          // Convert rgb color strings to hex
          function rgb2hex(rgb) {
            if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;
            rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
            function hex(x) {
              return ("0" + parseInt(x).toString(16)).slice(-2);
            }
            return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
          }

          // Select and run a map function on every tag
          $('*').map(function(i, el) {
            // Get the computed styles of each tag
            var styles = window.getComputedStyle(el);

            // Go through each computed style and search for "color"
            Object.keys(styles).reduce(function(acc, k) {
              var name = styles[k];
              var value = styles.getPropertyValue(name);
              if (value !== null && name.indexOf("color") >= 0) {
                // Convert the rgb color to hex and compare with the target color
                if (value.indexOf("rgb(") >= 0 && rgb2hex(value) === findHexColor) {
                  // Replace the color on this found color attribute
                  $(el).css(name, replaceWith);
                }
              }
            });
          });
        }
        // Call like this for each color attribute you want to replace
        colorReplace("#16a085", "#456780");
});

问题是，它有时有效，但有时却无效。 您可以访问我上面提到的网站。如果不是蓝色，只需重新加载几次，直到您看到蓝色。

Answer 1

您遇到网络(页面加载)问题。使用 Network 选项卡上的 (Firefox) Developer Toolbar 检查您的网站加载情况。

在那里你可以看到以下巧合:

蓝线表示文档触发事件的时间点，即加载页面的全部内容。 ( Specifics here. ) 这称为 DOMContentLoaded 事件。 See here for further details. 如链接页面中所述:

The DOMContentLoaded event is fired when the [...] document has been completely loaded and parsed, without waiting for stylesheets [...] to finish loading.

所以这意味着，如果样式表及时生成，您提供的函数可以设法覆盖颜色。如果没有，该函数甚至找不到相应的颜色代码，因为它们还不存在。很简单。

这反过来意味着，您应该在调用函数之前等待样式表加载。来自jQuery documentation ，甚至 $(document).ready() 可能还不够，您将不得不使用 $(window).on("load", function() { ... }) 以确保一切准备就绪。要了解有关 load 事件的线索，它会在网络监视器中标记为红线。

如果出于任何原因这对您不起作用，您当然可以将您的颜色样式作为样式标签从 .css 文件移动到 html 文档中。然后，我猜，它将在 DOMContentLoaded 上可用。