Jump to content

starts with a slow speed


alzami
 Share

Recommended Posts

don't know why the sliding effect starts with a real slow speed but after one loop it gains the expected speed .can't find out whats the problem is

<!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style>*{margin:0px; padding:0px;}#box{	width:700px;	height:301px;	border:1px solid black;	position:relative;	overflow:hidden;}img{	width:700px;	height:300px;}#i1{	height:300px;	width:700px;	position:absolute;	left:0px;	top:0px;}#i2{	position:absolute;	height:300px;	width:700px;	left:700px;	top:0px;}#i3{	height:300px;	width:700px;	position:absolute;	top:0px;	left:1400px;}</style></head><body><div id="box"><div id="i1"><img src="imagec1.jpg" ></div><div id="i2"><img src="imagec2.jpg" ></div><div id="i3"><img src="imagec3.jpg" ></div></div><script>var m=0;var n=700;var o=1400;function scroll(){	document.getElementById("i1").style.left = m +"px";	document.getElementById("i2").style.left = n +"px";	document.getElementById("i3").style.left = o +"px";	m=m-1;n=n-1;o=o-1;	if(m==-1400){m=700;}	if(n==-700){n=1400;}	if(o==-700){o=1400;}}setInterval(scroll,10);</script><script>window.onload=scroll();</script></body></html>
Link to comment
Share on other sites

with such a tiny interval window one should try to take as many optimizations as possible.first problem is that you're assigning the result of the scroll function to window.onload, and not a reference to the function itself. since scroll doesn't return anything, your basically saying window.onload = undefined, but your running scroll in the process (immediately, not when the page finishes loading). you're actually running scroll, possibly twice or even MORE at the same time with setInterval, before the page actually loads . link the setInterval to the onload through a function.

 

a couple other optimizations is that you can set the document.getElementById() calls in variables outside the function so that they aren't called at every single interval. you also don't need three variables n,m,o since they all move basically at the same pace and in the same direction. you can simply use one variable and the 3 elements will place in their specific offsets to that one variable.

<script type="text/javascript">var images = [   document.getElementById("i1").style,   document.getElementById("i2").style,   document.getElementById("i3").style];var pan = 2100;function scroll(){   images[0].left = ((pan+1399)%2100-1399)+"px";   images[1].left = ((pan+1399)%2100- 699)+"px";   images[2].left = ((pan--   )%2100- 699)+"px";   pan %= 2100;}window.onload=function(){setInterval(scroll,10)};</script>

the window.onload=scroll() is probably what slowed it down as it's trying to move images before they fully load, compounded with the fact that setInterval was running instantly (possibly multiple times before the images finish loading).

 

I can't guarantee that this will completely solve your slow down problems as it could be happening for a number of different reasons which I'll be unable to figure out from here. but this should help in the slightest.

Link to comment
Share on other sites

I actually don't see a slow/fast problem, but its claimed my pc is not of this world :), it would be more efficient to calculate moving one object only, instead of three.

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>Document Title</title>        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>        <style type="text/css">            *{margin:0px; padding:0px;}            #box{                width:700px;                height:301px;                border:1px solid black;                position:relative;                overflow:hidden;}            img{                width:700px;                height:300px;                border:none;                float:left;            }            #box_inner{height:300px;width:2800px;position:absolute; top:0; left:0;}/* why 2800px? to allow for clone. this width can be calculated using js to count images (numberimages+1) *700, OR make width MASSIVE it does not matter*/        </style>    </head>    <body>        <div id="box">            <div id="box_inner"><img src="../images/alien/1cha_imgash1.jpg" ><img src="../images/alien/1cha_imgash2.jpg" ><img src="../images/alien/1cha_imgash3.jpg" ></div>        </div>        <script type="text/javascript">            var m = 0;            function scroll() {                document.getElementById("box_inner").style.left = m + "px";                m = m - 1;                if (m == -2100) {                    m = 0;                }            }            window.onload = function() {                var imageFirst = document.getElementById("box_inner").firstChild;                var cln = imageFirst.cloneNode(false);                 document.getElementById("box_inner").appendChild(cln);                setInterval(scroll, 10);            }        </script>    </body></html>
Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...