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

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

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

1. 问题重现

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


    系统通知:
    



“闪跳”果然重现了:


marquee首次加载闪跳现象

2. 问题分析

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

3. 解决方案

我尝试过再内部放置一个空内容标签,指定一个足够长的宽度,比如这样:


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


4. 小结

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

你可能感兴趣的:(marquee内部数据动态生成时,首次加载会闪跳问题)