background preloader

Lazy Load Plugin for jQuery

Lazy Load Plugin for jQuery
Lazy Load is delays loading of images in long web pages. Images outside of viewport are not loaded until user scrolls to them. This is opposite of image preloading. Using Lazy Load on long web pages will make the page load faster. In some cases it can also help to reduce server load. Plugin is inspired by YUI ImageLoader Utility by Matt Mlinac. For those in hurry there are several demo pages: basic options, with fadein effect, noscript fallback, horizontal scrolling, horizontal scrolling inside container, vertical scrolling inside container, page with gazillion images, load images using timeout and load images using AJAX(H). When checking the demos clear browser cache between each request. How to Use? Lazy Load depends on jQuery. You must alter your image tags. <img class="lazy" data-original="img/example.jpg" width="640" height="480"> $(function() { $("img.lazy").lazyload(); }); This causes all images of class lazy to be lazy loaded. PRO TIP! Setting Threshold Event to Trigger Loading

http://www.appelsiini.net/projects/lazyload

Related:  Plugins jsJavascript

Skrollr – CSS animations linked to scroll position Having seen a few single-page year in review minisites the past few weeks, it’s clear that Skrollr has become the de facto standard to implement parallax scrolling effects into your websites. The idea behind Skrollr is straightforward: link a target CSS property+value to a given scroll position, via data-* attributes: Skrollr will interpolate between the start and end value whilst you scroll. Note that the resulting effect is different from the previously mentioned Scroll Animations. Whereas Scroll Animations triggers an effect when an elements scroll into view (and it cannot be undone once it was started), Skrollr is tightly linked to the actual scroll position/offset: scrolling up will revert the animation.

24 JavaScript Best Practices for Beginners As a follow-up to "30 HTML and CSS Best Practices", this week, we'll review JavaScript! Once you've reviewed the list, be sure to let us know what little tips you've come across! JavaScript utilizes two different kinds of equality operators: === | !== and == | != It is considered best practice to always use the former set when comparing. "If two operands are of the same type and value, then === produces true and !

How to Use jQuery to Make Slick Page Transitions Adding the final touches to a site can be the difference between a polished and beautiful site that looks “refined,” and a mediocre site that leaves no impression on visitors. jQuery, the versatile JavaScript library, can be leveraged to create all these fine tuned elements. Today we’re going to look at how to use it to create elegant page transitions. Let’s get to it! If you would like to quickly take a peek at a very simple implementation of this technique, below is the demo for viewing and download. Getting Started With HTML/CSS

Preload Images Sequentially With jQuery HEADS UP! This article was written in 2007. Information provided might not be valid anymore and should be taken with a grain of salt. Here is a small code snippet I use for preloading images for mouseovers. It uses $(window).bind("load", function() { xxx }) to wait until all page elements have finished loading. nanoGALLERY - image gallery simplified The language defined in the browser is used. If no corresponding definition is found, then the default language is used. - Internationalization of UI elements: Comparison of scrolling animation plugins Skrollr or ScrollMagic? Which one should you choose and why? This might be the question you ask yourself when you start a scrolling animation project. Here is my opinion on when you should use it and when you should stay away from it. Keep scrolling…

Light Table - a new IDE concept You can now try Light Table out via the Light Table Playground! Light Table's kickstarter has wrapped up! Despite the dramatic shift toward simplification in software interfaces, the world of development tools continues to shrink our workspace with feature after feature in every release. Even with all of these things at our disposal, we're stuck in a world of files and forced organization - why are we still looking all over the place for the things we need when we're coding? Why is everything just static text? Bret Victor hinted at the idea that we can do much better than we are now - we can provide instant feedback, we can show you how your changes affect a system.

20+ Demos Showing Advanced jQuery Effects Just a short while ago, Flash was one of the primary technologies used by web designers to add interactivity to a website. Since the introduction of the iPad, with its lack of the Flash Player, there’s an acceleration in the web development world to use alternative technologies to Flash, such as jQuery, Ajax and others. Although Flash is still a very powerful and useful tool, which works great on many cases, several of the effects that web designers are accustomed to creating in Flash, can be just as easily implemented using jQuery. Here are 21 online demos that show the power of jQuery for creating advanced effects and interactivity that can rival Flash. 1. Flip!

How to: Customizing and Theming jQuery UI Datepicker jQuery UI is simply awesome and due to the ease of use, it is popular and widely used in almost any website that need interactive features. And, in this post, we’ll look at one of the features provided, the Datepicker widget. We will try to learn how to customize the calendar theme, so that you will be able to create your own theme that will correspond to your overall design. However, you need a bit of understanding in JavaScript and familiarity with CSS before following this tutorial. If you’re ready, let’s get started.

Powerange - iOS 7 style range slider About Powerange Powerange is a range slider control, inspired heavily by iOS 7 and the "Power Rangers" TV series. It is easily customizable, both by CSS and JavaScript.

Related:  JqueryCode