PDA

View Full Version : javascript efect scrolling



tiu47
11-22-2009, 04:19 PM
hello sombody can explain how re-created this effect please?
I believe tthis is a plugin por jquery or something like this.


http://blogof.francescomugnai.com/2009/11/who-is-hosting-the-most-
famous-design-blogs/

thanks

jscheuer1
11-23-2009, 05:59 AM
http://www.appelsiini.net/projects/lazyload

pookeyblow
11-23-2009, 03:40 PM
I couldn't get this plugin to work in Safari, but it seems to work in the link tiu47 posted. It seems like a wordpress version of the plugin?

The plugin site says something about a Safari issue:

Known problems
Due to webkit bug #6656 Lazy Loading wont give you any improvements in Safari. It will load all images you wanted it or not.

I don't know if that has something to do with me not getting to work though..

jscheuer1
11-23-2009, 04:22 PM
Well the blog appears to be using the same version, perhaps they've modified theirs though. If so, you could just snag their version. However, the blog also appears to be using a different init. They are initializing to one or more elements with the SC class, not the body as in the demo for this script, and they are employing the fade-in option.

Now, another thing to consider is, just because these items appear to fade in under Safari, it doesn't necessarily mean that the script is actually preventing the images from downloading until needed - the main feature of the script.

In fact, with closer scrutiny of the blog page, it appears this is the case, no additional images are loaded after the initial page load in Safari, they just appear (fade in), but they were already loaded, so no savings on bandwidth there, though the effect is cute. Whereas other browsers actually delay the download of each image until it is required, Safari simply delays showing the image. At least this is how it looks to me.

You could always try:

YUI ImageLoader (http://developer.yahoo.com/yui/imageloader/)

Which purports to do the same sort of thing, but with a different library. Perhaps it works in Safari, but from the description of the bug for LazyLoader, it seems doubtful. Sounds like it is an issue with Safari that may not be able to be fully overcome.

tiu47
11-24-2009, 02:24 PM
Wow, Thanks i couldnīt saw any mail that notice me about yours answers ( sorry) and about this subject I found the lazy load too its great

you can see here:
http://www.maltchikes.com/maltchikes-blog/
and
http://www.maltchikes.com/maltchikes-blog/?p=23

but my next challenge its to do the "image thing" but with de divs in the index page

Thanks

jscheuer1
11-24-2009, 02:58 PM
I'm not sure what you are referring to, but here is your init for lazyload:


$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
});

That takes in all images on the page with a fade in effect showing img/grey.gif (if it is there) until the image actually loads. There are a number of other options though for the init as described on the lazyload home page. Perhaps one of those could help achieve your objective. If you want more help with that though, please be more specific as to what:


do the "image thing" but with de divs

means.

tiu47
11-24-2009, 05:26 PM
I'm sorry i will try to speak (write) my english. sorry very much
I tried to change the 'img' for a 'div' or ethier a class '.post' but it doesn' t work so I will trying

thanks

jscheuer1
11-24-2009, 06:16 PM
As far as I can tell, this script must work with image tags "img", but you can narrow it down, for example - if you have a division with the class of 'myPics':


<div class="myPics">
Images Go Here
</div>

you can probably do this (like waht they did on the page from the blog that you mentioned in your first post):


$(".myPics img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
});

Or perhaps even follow the example from the lazyload page:


Images inside container

You can also use plugin for images inside scrolling container, such as div with scrollbar. Just pass the container as jQuery object. There is a demo for horizontal (http://www.appelsiini.net/projects/lazyload/enabled_wide_container.html) and vertical (http://www.appelsiini.net/projects/lazyload/enabled_container.html) container.

#container {
height: 600px;
overflow: scroll;
}

$("img").lazyload({
placeholder : "img/grey.gif",
container: $("#container")
});

Note: The first code block in the quote is style, if you don't know what that means, just ask. You may also follow the links in the quote and view the source code of those pages using your browser's 'view source' to see what was done, which is a good idea because you also need a division with the id 'container'.