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

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.”

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

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.

Related:  

Copyright © 2024 Adnet Media. All Rights Reserved. XBIZ is a trademark of Adnet Media.
Reproduction in whole or in part in any form or medium without express written permission is prohibited.

More Articles

profile

WIA Profile: Holly Randall

If you’re one of the many regular listeners to Holly Randall’s celebrated podcast, you are already familiar with her charming intro spiel: “Hi, I’m Holly Randall and welcome to my podcast, ‘Holly Randall Unfiltered.’ This is the show about sex, the adult industry and the people in it.

Women In Adult ·
trends

What's Hot Now: Leading Content Players on Trending Genres, Monetization Strategies

The juggernaut creator economy hurtles along, fueled by ever-ascendant demand for personality-based authenticity and intimacy — yet any reports of the demise of the traditional paysite are greatly exaggerated.

Alejandro Freixes ·
opinion

An Ethical Approach to Global Tech Staffing

One thing my 24-year career as a technologist working to support the online adult entertainment industry has taught me about is the power of global staffing. Without a doubt, I have achieved significantly more business success as a direct result of hiring abroad.

Brad Mitchell ·
opinion

Finding the Right Payment Partner

Whenever I am talking with businesses that are just getting started, one particular question comes up a lot: “How do I get a merchant account?” It’s a simple question, but it has a complicated answer.

Jonathan Corona ·
opinion

The Taxman Cometh for Every Business

February may be the month of romance, but it is also a time when we need to think about something that inspires very little love: taxes. April is not far away, and the taxman is always waiting. This year, federal and most state income taxes are due Monday, April 15.

Cathy Beardsley ·
opinion

The Continuous Journey of Legal Compliance in Adult

The adult entertainment industry is teeming with opportunity but is also fraught with challenges, from anticipating consumer behavior to keeping up with technological innovation. The most labyrinthine of all challenges, however, is the world of legal compliance.

Corey D. Silverstein ·
profile

Alexzandra Kekesi Takes Charge as Aylo's Head of Community and Brand

While Alexzandra Kekesi was earning her bachelor’s degree in women’s studies from the Simone de Beauvoir Institute at Concordia University, feminist thinkers influenced her deeply, inspiring her passion for sex work advocacy.

Alejandro Freixes ·
opinion

New Year, New Tools for Tackling Chargebacks

Happy New Year! Looking back, 2023 saw some important developments for the industry. Visa lowered the limit on credit card surcharges to 3%, AI continued growing fast and Mastercard published an update to its Business Risk Assessment and Mitigation (BRAM) program.

Jonathan Corona ·
opinion

The Next Frontier in Computing, Storage Is Here

While I typically steer clear of diving too deeply into the technical nitty-gritty, in this month’s column I’m making an exception, because there’s a technological evolution underway that has the potential to fundamentally enhance technical outcomes and, more importantly, grow revenue.

Brad Mitchell ·
opinion

Raising Awareness and Taking Action Against Financial Discrimination

While foes of the adult entertainment industry often focus on “moral” concerns and perpetuate social stigmas, another form of attack can be equally or even more damaging: financial discrimination.

Corey D. Silverstein ·
Show More