[SOLVED] OnScroll

[jaymc]

Ok, I have a div around 50 pix in height

 

It has a scroll bar to show the other 49 pictures inside the div, as only 1 is visible without scrolling (each image is 50px)

 

Problem is, only 5% of the time people will scroll the view the other 49 images, thus a waste of time loading them 95% of time as not visible without scroll

 

So, I was going to create a dynamic javascript function to make it so when they scroll, it preloads the other 49 images

 

I can do that no problem, its the OnSCroll even thats the problem

 

If they touch the SCroll bar, I will load the images via the javascript, hence, scrolling executes my function

 

However, if they scroll, then scroll again, the function is executed again. I know the images will probably be cached so no harm done, I just dont want the function executed numerous times after the first initial execution

 

Not to mention that scrolling via the scroll button accounts for an ONSCROLL even everytime it moves a milimetre..

 

They use it on youtube if you have noticed.. When you click the scroll bar to view hidden content the images are preloaded

 

So, in conclusion, how to make blah blah blah happens when the scroll bar/button is touched for the first time, then never again

 

Cheers!

[phpQuestioner]

set a cookie and use a if/else condition to preload the images.

 

if cookie exist; do not preload images

 

else preload images

[jaymc]

Yeh, right lines but I dont want to use cookies, I tried this

 

OnScrollDown="if(touched != 'yes'){do stuff} else {var touched = 'yes';}"

 

But it doesnt work?

[phpQuestioner]

 

cookie is probably you only options for this.

[jaymc]

The var stuff should work though? Im 99% sure I have set vars like this previously

 

If someone can advise?

[phpQuestioner]

your code doesn't even make sense; you have not even declared the variable. unless you set a cookie you will have no way to cancel the function, because the function that is associated with onscroll event will keep being triggered. how do you come up with your percentage facts; like 5% of people are scrolling a div - are you using a hit counter for a scroll event or something?

[jaymc]

The 5% was a guess, its probably 1%

 

This is declaring the variable right?

 

var touched = 'yes'

 

This is checking the variable?

 

if(touched != 'yes'

 

Im not great with javascript but seems pretty logical.. Are you sure this can not be done without using a cookie..

[phpQuestioner]

var touch is being declared as 'yes' in the else condition, but you do not have it declared above the if/else condition. the if condition does not even know what "touch" is. what are you setting the touch var to "yes" with? if your guessing, that means you really don't know how many people actually are viewing all the pictures.

[taith]

you'd want to declare your "touched" variable outside of that function... so it'd be a global variable...

 

var touched=false;
OnScrollDown="if(touched == false){do stuff} else { touched = true;}"

 

then... when next that function is called... it "SHOULD" pick up on the global variable and not run again

[phpQuestioner]

you can also try this:

 

<script language="javascript">
var i = 0;
function doEventOnce()
{
var myDIV = document.getElementById('pics');
myDIV.onscroll = function() {
i++
if (i == "1") {
document.getElementById('pics').scrollTop='0';
alert("Remove This Alert And Add Your Preloader Here"); // remove this alert and add your preloaded here
}
else {
// do not preload image again
}
}
}
</script>


<div id="pics" style="border:solid 1px black;width:500px;height:150px;overflow:auto" onscroll="doEventOnce()">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>

[taith]

OR store your preload into an array... and only preload if the array.length==0

[jaymc]

you'd want to declare your "touched" variable outside of that function... so it'd be a global variable...

 

var touched=false;
OnScrollDown="if(touched == false){do stuff} else { touched = true;}"

 

then... when next that function is called... it "SHOULD" pick up on the global variable and not run again

Thats the one mate, declaring it globally sorted the issue

 

Cheers!

[phpQuestioner]

you'd want to declare your "touched" variable outside of that function... so it'd be a global variable...

 

var touched=false;
OnScrollDown="if(touched == false){do stuff} else { touched = true;}"

 

then... when next that function is called... it "SHOULD" pick up on the global variable and not run again

Thats the one mate, declaring it globally sorted the issue

 

Cheers!

 

that really doesn't make sense to me; post your final code, so I can see what you did.

[jaymc]

<html>
<head>
<script>
var go = "no"
</script>

</head>
<body>


<div id="lol" style="height:100px;overflow:scroll;" OnScroll="if(go == 'no'){alert('hi');go='yes'}else {}">
hey
<BR>
hey
<BR>
hey
<BR>
hey
</div>

 

There you go mate

[phpQuestioner]

ok, I see what you did; you set the "go" variable value when the if condition occurred; but that was not the original code - that is what I didn't get.