marquee内部数据动态生成时，首次加载会闪跳问题

marquee 元素（<marquee>）可以用来插入一段滚动的文字，实现类似走马灯的动效。
尽管它已经过时（MDN文档已经不建议使用），但不得不说，在快速实现文字滚动时，这个标签依旧简单粗暴。

此次项目有个需求很紧急，所以采用了<marquee>，但遇到一个问题：当页面首次加载时，文字还没有滚动完，就会突然闪跳重新开始滚动。

1. 问题重现

写ajax有点麻烦，干脆使用延时器来动态填充数据。代码如下：

<marquee scrollamount="10" id="notificationMarquee" class="notification orange" onmouseover="this.stop();" onmouseout="this.start();">
    <span>系统通知：</span>
    <span id="marqueeList"></span>
</marquee>
</div>
<script type="text/javascript">
var data = [
    {'id':1, 'title':"春节放假通知 一起去港澳HAPPY购物吧！"},
    {'id':2, 'title':"年后发红包通知  大家一起红红火火咯！"},
    {'id':3, 'title':"春游踏青通知 一起去滚蛋谷滚一滚把！"},
];

function fillMarqueeData(){
    var oList = document.getElementById("marqueeList");
    var html = '';
    for(var i=0; i< data.length; i++){
        console.log(data[i]);
        html += '<a id="' + data[i].id + '">' + (i+1)+'. ' + data[i].title + '</a>';
    }
    oList.innerHTML = html;
}

setTimeout(fillMarqueeData, 500);

</script>

“闪跳”果然重现了：

marquee首次加载闪跳现象

2. 问题分析

寻思了很久，才发现是因为<marquee>内部静态布局时只有四个汉字“系统通知：”，后续要展示的文字是通过ajax请求获得。
所以当首次加载页面时，<marquee>会认为内容宽度只有静态布局时的宽度（也就是四个汉字的宽度）；当四个汉字滚完，<marquee>以为本次滚动结束，就会从头开始滚动，导致了“闪跳”现象。

3. 解决方案

我尝试过再<marquee>内部放置一个空内容标签，指定一个足够长的宽度，比如这样：

<marquee><a style="width:2000px;"></a></marquee>

但并没有什么用。后面想，什么静态宽度，干脆等有数据了，再构建marquee标签好了。嗯，这种方式可以解决问题。

<!-- 解决闪跳问题 -->
<div id="marqueeDiv"></div>

<script type="text/javascript">
var data = [
    {'id':1, 'title':"春节放假通知 一起去港澳HAPPY购物吧！"},
    {'id':2, 'title':"年后发红包通知  大家一起红红火火咯！"},
    {'id':3, 'title':"春游踏青通知 一起去滚蛋谷滚一滚把！"},
];

function fillMarqueeData2(){
    var oDiv = document.getElementById("marqueeDiv");
    var html = '';
    html += '<marquee scrollamount="10" id="notificationMarquee" class="notification orange" onmouseover="this.stop();" onmouseout="this.start();">';
    html += '<span>系统通知2：</span>';
    html += '<span>';
    for(var i=0; i< data.length; i++){
        console.log(data[i]);
        html += '<a id="' + data[i].id + '">' + (i+1)+'. ' + data[i].title + '</a>';
    }
    html += '</span>';
    html += '</marquee>';

    oDiv.innerHTML = html;
}

setTimeout(fillMarqueeData2, 100);
</script>

4. 小结

本次在问题重现上走了很多弯路，最初以为是布局样式或者是标签属性设置问题，后来偶然发现闪跳的时机（闪跳的宽度）才想到了静态宽度。所以静态标签和动态创建数据会有出入，需要小心。

最后编辑于：2019.01.24 14:57:09