alzami Posted December 3, 2013 Share Posted December 3, 2013 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 More sharing options...
Hadien Posted December 4, 2013 Share Posted December 4, 2013 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 More sharing options...
alzami Posted December 5, 2013 Author Share Posted December 5, 2013 (edited) thanks for your reply.i replaced my script with your codes but still remains the same.slow at first and gains speed later on... Edited December 5, 2013 by alzami Link to comment Share on other sites More sharing options...
dsonesuk Posted December 5, 2013 Share Posted December 5, 2013 (edited) 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 December 5, 2013 by dsonesuk Link to comment Share on other sites More sharing options...
alzami Posted December 6, 2013 Author Share Posted December 6, 2013 still slow.now i understand its my pc/browser's problem . i have a question thouge.why you used false as argument instead of true in cloneNode??? Link to comment Share on other sites More sharing options...
dsonesuk Posted December 6, 2013 Share Posted December 6, 2013 img has no child nodes Link to comment Share on other sites More sharing options...
alzami Posted December 6, 2013 Author Share Posted December 6, 2013 thanks!!!!! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now