Home > Features > Dev Depot: BttrLazy Loading, “Lazy loading” jQuery plugin • Bookmark   • Newsletters   • Register Search Options

FEATURE

Dev Depot: BttrLazy Loading, “Lazy loading” jQuery plugin

Dev Depot: BttrLazy Loading, “Lazy loading” jQuery plugin

June 26, 2014
Text size: 
View in Digital Mag
Get XBIZ News
XBIZ Research
Will virtual reality boost the paysite market?
Yes, it will soon
  40.56%
Yes, but in a few years
  37.06%
No
  22.38%
Out of 143 votes. Results based on votes submitted by members of XBIZ.net social network.

" Lazy loading allows your web application to defer image loading until images are scrolled to. That way the page loading time decreases considerably. "

According to French front end developer Julien Renaux, nowadays with the device (mobile, tablet, desktop etc.) and connectivity diversity (3G, 4G etc.) confronting coders, serving optimized information to specific environments is paramount, though not easy.

“Many techniques exist to answer performance issues, especially when it comes to images. Indeed images are often the biggest resource of a web page and therefore can be the limiting factor in obtaining an acceptable page loading time,” Renaux notes, adding, “Image loading can be optimized in many ways but the ‘lazy loading’ and ‘multi-serving’ techniques are among the most popular.”

In the case of lazy loading, images are only loaded when necessary, boosting the perceived speed at which a web page is ready for viewing; and while this concept is far from being new, Renaux says that many sites are still not using it — despite the benefits.

“Lazy loading allows your web application to defer image loading until images are scrolled to. That way the page loading time decreases considerably,” Renaux explains. “Knowing that just a one second delay in page-load can cause up to a seven percent loss in customer conversions, and decrease customer satisfaction by 16 percent, [then] you understand how important performance can be for your audience.”

“Adapting your web page’s content to any type of screen has become vital,” Renaux added. “For images the problem is not that easy, as there is no HTML markup that allows you to load a different version of an image on different devices.”

According to Renaux, the problem stems from the concept of responsive design, which has spread widely due to the popularity of frameworks such as Twitter.

While multi-serving images, where different versions of an image (usually different sized images) are served to different devices, is a proven solution, other hacks exist; such as using CSS media queries to load different image versions via CSS’ background-image property applied to a DIV or SPAN tag.

Both approaches have their benefits, which led Renaux to develop BttrLazyLoading (bttrlazyloading.julienrenaux.fr) as a way to combine lazy loading and image responsivity into a single coding package.

“BttrLazyLoading is a jQuery plugin that allows your web application to only load images within the viewport [and] also allows you having different versions of an image for four different screen sizes,” Renaux explains. “BttrLazyLoading defers image loading until images are scrolled to [so] the page loading time decreases considerably [and also] makes sure that you always have the appropriate image loaded for any type of screen.”

The four default image sizes are <768px for phones, ≥768px for tablets, ≥992px for desktops and ≥1200px for large desktops, but some designers may opt for a 960px break point on desktop images for better integration with existing frameworks and screen sizes.

Renaux says that BttrLazyLoading is Retina ready, using the common @2x naming convention to display the high resolution images when the option is enabled; and is fully customizable to adapt to most needs — with more than 10 options (such as animations or background colors), plus four events available. Each option can be set for one or several images or for the whole page at once by using the setOptions global function.

If you are looking for a slick solution to speeding up your site, BttrLazyLoading is it.


BUSINESS ANALYSIS

Manufacturers Take Action Against Counterfeit Sex Toys

The mainstreaming of pleasure products is proving to be a blessing and a curse for the sex toy industry. As the demand for pleasure products continues to grow, manufacturers are seeing an increase of counterfeiters... More »

Trends in Paysite Design, Content Delivery

Given the highly visual nature of adult entertainment, it is no surprise that many paysites have shown design-forward approaches — some skirting the bleeding edge, while others sought stability over... More »

Surviving Affiliates Seem to Be Thriving

Long a mainstay of traffic generation for adult website owners and monetization channel for tech savvy marketers, “sponsor programs” have delivered countless millions of dollars to affiliates... More »
XBIZ NEWSLETTERS
Stay informed of the latest industry developments. Get XBIZ newsletters delivered to your inbox. Subscribe today!
Enter email address:

* To manage existing subscriptions click here.






POPULAR PRODUCTS & SERVICES
Submit your press release to
multiple news outlets with 1 click.
Subscribe to RSS news feeds or
add free content to your website.
Access XBIZ news and articles
with your mobile device.
Access the latest issues of the industry's leading trade publications in digital form. View online or download for offline viewing.

UPCOMING EVENTS

eroFame

Oct 05 - Oct 07
Hannover, Germany

EXXXOTICA Edison

Nov 04 - Nov 06
Edison, New Jersey

2016 Inked Awards

Nov 05 - Nov 05
Edison, New Jersey

XBIZ 2017

Jan 09 - Jan 13
Hollywood, CA
Everyday thousands of business professionals browse XBIZ's industry directory for quality products and services. Not listed yet? Your company could be losing potential new business. Submit your company today!
Use XBIZ RSS feeds to stay informed of the latest industry developments or as a content syndication tool for your website!