Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Senior Member straight_up's Avatar
    Join Date
    Dec 2003
    Location
    Pennsylvania/Arizona
    Posts
    601
    Member #
    4309
    Hey,

    Wondering if there is a JS library out there that makes the following fairly easy:
    • Animating movement of objects/images
    • Scaling images (animatedly)
    • Dynamically preloading images
    • Detecting when said preloaded image has finished loading


    I expect to hear something like "Yahoo's GUI thingers" or "prototype/script.aculo.us" from someone who's used it and enjoyed the experience of that library.

    Thanks

    Edit: I'm using PHP, so a Ruby or Java-based library is worthless to me, unfortunately.
    I am Alan Hogan (@alanhogan on Twitter). I like PHP, UI/UX design, and OS X.

  2.  

  3. #2
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    My pick is jQuery, as always.

    1. Animating movement of object/images: You can use the Animate functions to animate the absolute positions of any HTML element.

    2. You can also animate any other properties, including width and height. I'm fairly confident that it'll work on images. Example here.

    There is discussion about how to preload here. I know preloading works (I've done it several times before), and I'm sure there's a way to get a callback when an image is loaded. I'll dig around for that.

    Basically I'm most comfortable with jQuery because it is very, very simple, and I rarely have to duplicate code. It might be a slight change from your usual JS, but once you've gotten used to it, it's really easy to use. (And you've gotta love the Selectors - yes, in jQuery you can very easily apply multiple things to multiple elements at once).

    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  4. #3
    Senior Member straight_up's Avatar
    Join Date
    Dec 2003
    Location
    Pennsylvania/Arizona
    Posts
    601
    Member #
    4309
    Sounds cool, Steax, but only if you can indeed get a callback on image load!
    I am Alan Hogan (@alanhogan on Twitter). I like PHP, UI/UX design, and OS X.

  5. #4
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Crunching down on that this instant. I'm wondering if the other frameworks have this functionality built-in...
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  6. #5
    Senior Member straight_up's Avatar
    Join Date
    Dec 2003
    Location
    Pennsylvania/Arizona
    Posts
    601
    Member #
    4309
    Taking a real quick look at jQuery I didn't see that preloading functionality.. anyone have any other ideas for just that functionality?
    I am Alan Hogan (@alanhogan on Twitter). I like PHP, UI/UX design, and OS X.

  7. #6
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Preloading code should be standalone, I suppose. I have yet to find a framework with preloading integrated (which is ironic because several of them have lazy loading as a plugin)...
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  8. #7
    Senior Member straight_up's Avatar
    Join Date
    Dec 2003
    Location
    Pennsylvania/Arizona
    Posts
    601
    Member #
    4309
    I haven't done a whole lot of JS development - what's lazy loading?
    I am Alan Hogan (@alanhogan on Twitter). I like PHP, UI/UX design, and OS X.

  9. #8
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Lazy loading is the method of loading images above the fold (in other words, images near the top of the page) first, then slowly load the ones below it. This speeds up page loading and avoids having to load all images at once.

    I'm still working on the preload and preload completion. I'm looking at the lightbox code for that...
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  10. #9
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Preloading should be relatively straightforward. I'm pretty sure img elements have an onload event handler, so it should be a simple matter of adding a display: noned element to the body with an onload handler on it to let you know when it's done.

    By the way, prototype is my library of choice (http://prototype.js/). jQuery's pretty nice, but the ridiculous overloading of the $ function drives me insane :-P

  11. #10
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Ah, jQuery fits your bill. I've found that we can use the .load(function(){}) syntax on any HTML element, that will trigger the function when the element is completed loading. So, to preload your image, use any ordinary preload script (the simple var img = new Image(); img.src="img.jpg") stuff, and then simply attach the .load listener to your <img /> element.

    Example:

    HTML Code:
    <img src="myimage.jpg" />
    Code:
    $(function(){
      var img = new Image();
      img.src = "myimage.jpg"
    
      $("img[src=myimage.jpg]").load(function(){
        alert("I'm loaded!");
      });
    });
    There ya go!

    Shadowfiend: I don't think it's overloading. It does get a bit confusing at times (such as, the .load(function) is used as a listener when an element finishes loading, and the .load(file) syntax is also used to remotely load files via AHAH. Ah well. It's still flexible. )
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:08 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com