关于setinterval()的问题

duck530 2010-10-18 10:37:08

我现在做图片滚动的效果，程序正确运行。但是就是图片滚动得很不自然，总是有停顿的感觉，在火狐下感觉较为平滑，IE下严重的停顿感觉。请问高手如何解决？

有人说需要设置一个属性，但是找偏了都没有找到设置那个属性。希望高手解决！



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ScrollImg.aspx.cs" Inherits="ScrollImg" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <style type="text/css">

    a{float:left;border:0px;}

    img{height:80px;border:0px;}

    </style>

    <script type="text/javascript">



        $E = function(el) {

            return document.getElementById(el);

        }

        window.onload = function() {

            // 动态加载图片列表

            /*var htmls = [];

            for (var i = 1; i < 9; i++) {

                htmls.push('<a href="#"><img src="Img/' + i + '.jpg" /></a>');

            }

            $E("imgs").innerHTML = htmls.join("");*/



            $E("imgs").innerHTML += imgs.innerHTML;

            $E("imgs").scrollLeft = 0;



            var images = document.getElementsByTagName("img"),

                w = 0;

            for (var i = 0; i < images.length; i++) {

                w += parseInt(images[i].offsetWidth);

            }

            $E("imgs").style.width = w + "px";



            window.setInterval(scrollImg, 1);

        }



        function scrollImg() {

            if ($E("imgList").scrollLeft > $E("imgs").offsetWidth / 2)

                $E("imgList").scrollLeft = 0;

            else

                $E("imgList").scrollLeft++;



            $E("dd").innerHTML = $E("imgList").scrollLeft;

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div id="imgList" style="width:600px; height:80px; overflow:hidden;">

        <div id="imgs">

            <a href="#"><img src="Img/1.jpg" /></a>

            <a href="#"><img src="Img/2.jpg" /></a>

            <a href="#"><img src="Img/3.jpg" /></a>

            <a href="#"><img src="Img/4.jpg" /></a>

            <a href="#"><img src="Img/5.jpg" /></a>

            <a href="#"><img src="Img/6.jpg" /></a>

            <a href="#"><img src="Img/7.jpg" /></a>

            <a href="#"><img src="Img/8.jpg" /></a>

        </div>

    </div>

    <div id="dd"></div>

    </form>

</body>

</html>

...全文

297 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

duck530 2010-10-21

打赏
举报

问题解决了
1、IE本来执行效率有关
2、图片太大，在滚动时文件流太大，改变的时候延迟（暂且这样说）太高

把图片尺寸像素压缩小之后效果明显提高，因为图片质量太高了（一般都是4-6M）所以导致了停顿效果。

wtcsy 2010-10-19

打赏
举报

常用的dom元素保存其实可以减少查找元素的时间
单个人感觉这个问题还是在页面的repaint\reflow

每次改变img的位置都会产生reflow 这个在ie下是很耗资源的

所以更倾向于2楼的方法找个临界点让reflow 的次数降低但是又不会台印象视觉效果

关于repaint\reflow的一些介绍

http://blog.csdn.net/baiduforum/archive/2010/03/25/5415527.aspx

zhangshaolongjj 2010-10-19

打赏
举报

这段代码就可以了，要是提高的话，我也只知道向1＃的方法，而且你也应该把$E("imgList")缓存起来，因为你这段代码调用太频繁了，还是有提高的！FF上能运行！

wyman25 2010-10-19

打赏
举报

IE的JS能力比FF,chrome就是差一点。之前google首页的一个3维碳60球在chrome滚动很流畅，在ie上就很卡。

碧海情天-赵亮 2010-10-19

打赏
举报

浏览器对于JS的运行性能是有差别的。新版IE有所改进，在这之前的IE和FF及CHROME等比起来，JS执行的确效果要差。

我现在用IE8，运行效果还可以，看不出有什么停顿。
另外，楼上把我想说的说了。时间设得太小，就算电脑能反映过来，人眼也反应不过来，所以没什么意义，改大点好些。
至于++，倒可以不变，没什么问题。

上海程序员3 2010-10-18