本指南介绍了如何使用优化工具防闪烁代码段，该代码段支持异步加载优化工具容器，能够在容器加载完成之前将网页隐藏起来，从而确保用户不会看到未经实验修改的初始网页内容。
防闪烁代码段
要将防闪烁代码段添加到您的网站，请在会加载优化工具容器的每个网页的 <head> 部分插入以下代码，使其位于网页上的任何其他代码之前。此外，您还必须使用优化工具容器 ID 替换字符串 OPT-XXXXXX：
<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{'OPT-XXXXXX':true});</script>
要更好地了解优化工具防闪烁代码段的工作原理，请参阅以下带注释的代码段版本：
<!-- Optimize anti-flicker CSS code -->
<style>
/* Sets the opacity of any element with this class to 0 */
.async-hide {
opacity: 0 !important
}
</style>
<!-- Optimize anti-flicker JavaScript code -->
<script>
/**
* Adds a class to the <html> element that hides the page until the Optimize
* container is loaded and the experiment is ready. Once Optimize is ready
* (or 4 seconds has passed), the class is removed from the <html> element
* and the page becomes visible again.
*
* @param {Window} a The global object.
* @param {HTMLHtmlElement} s The <html> element.
* @param {string} y The name of the class used to hide the <html> element.
* @param {string} n The name of property that references the dataLayer object.
* @param {number} c The max time (in milliseconds) the page will be hidden.
* @param {Object} h An object whose keys are Optimize container IDs.
* @param {undefined} i (unused parameter).
* @param {undefined} d (unused parameter).
* @param {undefined} e (unused parameter).
*/
(function(a, s, y, n, c, h, i, d, e) {
// Adds a class (defaulting to 'async-hide') to the <html> element.
s.className += ' ' + y;
// Keeps track of the exact time that the snippet executes.
h.start = 1*new Date;
// Creates a function and assigns it to a local variable `i` as well as
// the `end` property of the Optimize container object. Once Optimize is
// loaded it will call this function, which will remove the 'async-hide'
// class from the <html> element, causing the page to become visible again.
h.end = i = function() {
s.className = s.className.replace(RegExp(' ?' + y), '');
};
// Initializes the dataLayer as an empty array if it's not already initialized
// and assigns the passed Optimize container object to the dataLayer's `hide`
// property. This makes the function defined above accessible globally at the
// path `window.dataLayer.hide.end`, so it can be called by Optimize.
(a[n] = a[n] || []).hide = h;
// Creates a timeout that will call the page-showing function after the
// timeout amount (defaulting to 4 seconds), in the event that Optimize has
// not already loaded. This ensures your page will not stay hidden in the
// event that Optimize takes too long to load.
setTimeout(function() {
i();
h.end = null
}, c);
h.timeout = c;
})(
window, // The initial value for local variable `a`.
document.documentElement, // The initial value for local variable `s`.
'async-hide', // The initial value for local variable `y`.
'dataLayer', // The initial value for local variable `n`.
4000, // The initial value for local variable `c`.
{'OPT-XXXXXX': true} // The initial value for local variable `h`.
);
</script>
自定义防闪烁代码段
在某些情况下，您需要自定义防闪烁代码段。如果出现这种情况，最常见的原因包括：
- 支持加载多个优化工具容器
- 延长回调超时时间
- 更改添加到
<html>元素的类名称
加载多个容器
如果您要加载多个优化工具容器，可以自定义代码段，以确保相应网页在所有容器加载完成之前保持隐藏状态。
要指定多个容器，请在代码段末尾处的容器对象中添加其他键。以下代码会等待系统加载容器 OPT-XXXXXX 和 OPT-YYYYYY：
<style>.async-hide { opacity: 0 !important} </style> <script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date; h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')}; (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c; })(window,document.documentElement,'async-hide','dataLayer',4000, {'OPT-XXXXXX':true,'OPT-YYYYYY':true});</script>
更改超时时间
要更改优化工具在从 <html> 元素中移除 .async-hide 类之前所等待的默认时间（如果优化工具加载时间过长），请更新在代码段末尾处传递的数字。
以下代码会先等待 5000 毫秒，然后再显示网页：
<style>.async-hide { opacity: 0 !important} </style> <script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date; h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')}; (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c; })(window,document.documentElement,'async-hide','dataLayer',5000, {'OPT-XXXXXX':true});</script>
更改 async-hide 类名称
如果您已在 CSS 中定义 async-hide 类名称，则可以选择其他名称。要更改名称，请更新 <style> 标记中的类以及在代码段末尾处传递的参数中的类。
以下代码将使用 optimize-loading 类，而不是 async-hide 类：
<style>.optimize-loading { opacity: 0 !important} </style> <script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date; h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')}; (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c; })(window,document.documentElement,'optimize-loading','dataLayer',4000, {'OPT-XXXXXX':true});</script>