Tips for preloading a small placeholder image before the main content is loaded

After browsing , I noticed an interesting image loading style. The website initially shows a patterned image before revealing the actual content. This method creates visually appealing content while waiting for the entire webpage to load.

Upon inspecting the source code, I found a class named "lazy is-loading." It seems like this class plays a role in the image loading process.

I am eager to replicate this effect on my own website and have been researching progressive images. I came across an article on 'css-tricks.com' about the 'blur-up technique' for loading background images by starting with a small blurred image until the full image is downloaded.

Despite my efforts, I have not yet uncovered how the image loading trick works on .

If anyone has any insights or information to share, it would be greatly appreciated!

javascripthtmlcssimageload

Answer №1

At times, using the CSS property background-image may not be the best choice. An alternative approach would be to utilize a basic inline JavaScript for the task, despite the downside of the placeholder image needing to load first and load correctly. Nonetheless, this is typically not a major concern since the placeholder image tends to load faster initially and may already be cached.

For instance:

<img src="placeholder.jpg" data-src="my-image.jpg" onload="if(this.src !== this.getAttribute('data-src')) this.src=this.getAttribute('data-src');">

This method works because the browser usually maintains the current image being displayed until the new image is fully loaded.

While it may not be a flawless solution, it is uncomplicated, relatively easy to understand, and simple to implement.

Answer №2

Although this question is old, it has remained unanswered.

I am currently working on a similar issue and have been experimenting with a simple solution:

<img style="background-image: url('MYIMAGE.svg');" src="MYIMAGE.jpg" width="500">

The .svg file is lightweight and loads quickly, followed by the appearance of the .jpg image. I have kept the code minimal to maintain simplicity.

Answer №3

Upon examination of the code, it is evident that the image is displayed using a sprite set as the background-image on a div element, in addition to the main image being loaded:

<div class="lazy-placeholder item-image-wrapper-bg6" style="width: 512px"></div>

Furthermore, the CSS code responsible for this effect is as follows:

.item-image-wrapper-bg6 {
    background-image: url(../elements/bg-6.gif?2);
    background-size: 85px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unlocking the Power of Session Variables in AngularJS using Ui-router

Currently, I am utilizing Angular to manage routes. On the server side, Passport is being used so that I can access the user session variable req.user in my views. However, when dealing with a route rendered by ui-router, my req.user ends up being undefine ...

javascriptnode.jssessionexpressangular-ui-router

Switch back and forth between words using a simulated typewriter effect in JavaScript

My current project involves writing code that will display text in a typewriter style. The code should be able to print a string, erase the last word, and type out words from an array in sequence. Each word in the array should be displayed one at a time be ...

javascripthtmlarrays

The model fails to bind when JSON is sent to the MVC controller

I've been facing an issue with my JSON payload not getting binded in my controller. I attempted creating a class with List<Models.UpdateChatRequestModel> Chats, but that didn't work for me. I also tried using an array name, but that approac ...

javascriptc#jsonasp.net-mvc.net-core

Inconsistent Functionality of Bootstrap Popover

I am experiencing an issue with the bootstrap Popover feature. It seems to work inconsistently - sometimes it works and other times it doesn't. I am using it to create a popover that displays a user's information when a visitor hovers over the us ...

javascriptjquerycsstwitter-bootstrap

Each styled component will yield the respective type definitions using (@types/styled-components)

Encountering a strange problem with styled-components in VSCode. Every component from styled-components is returning 'any'. https://i.sstatic.net/0kFJw.png https://i.sstatic.net/S20cS.png I had it working previously, but unsure when it stopped ...

javascriptreactjstypescriptreact-nativestyled-components

Modify a CSS style with JavaScript or jQuery

Can CSS rules be overwritten using jQuery or JavaScript? Imagine a table with rows categorized by different classes - "names" for persons and "company" for companies. How can we efficiently hide or show specific rows based on these classes? If we have a ...

javascriptjquerycss

Data loading issue with asp.net mvc Ajax

I am currently facing an issue while attempting to fetch data from the controller using ajax. Controller [HttpGet] public ActionResult GetServices() { var data = _bbdb.ListServices.Where(d => d.Status == true).ToList(); return Json(data, JsonR ...

javascriptjqueryasp.netajaxasp.net-mvc

Unable to create circular dots within the Slick Slider widget

While attempting to create a slider with dots, I encountered an issue where the dots appeared as ellipses instead of circles, despite setting the width and height to be the same. For instance, I specified width: 12px; height: 12px; but it resulted in a sha ...

htmlcss

A Vue.js trick to modify the element's class within a v-for loop when hovering in and out

I'm having trouble changing the class of a single element within a v-for loop based on mouseenter/mouseleave events. I want only the hovered element to change its class, but currently, all elements in the list are affected. I attempted binding the cl ...

javascripthtmlcssvue.js

Preventing duplicate submissions in Ajax by serializing form data

I'm having trouble preventing double submissions on my form when I rapidly press the button that triggers a click event. I attempted to disable the button after a successful submission, but it still submits twice. Here is my code: <script> $(do ...

javascriptjqueryajaxhtml

Make the text stand out by highlighting it within a div using a striking blue

Currently, I am working with Angular2 and have incorporated a div element to display multiple lines of text. Positioned below the text is a button that, when clicked, should select the entirety of the text within the div (similar to selecting text manually ...

htmlcssangulartypescriptangular2-template

At what point does a dynamically loaded CSS file in the head section of a webpage actually

If the answer is already out there somewhere, I would really appreciate a link because I just can't seem to find it. When loading .php pages, I either include 'header.php' directly with <?php include 'header.php'; ?> or on ...

javascriptphpcss

`replaceWith function limited to single use`

I'm encountering an issue where the replaceWith function is only working on the first instance. Even though I am getting updated data, it's not being written to the div after the initial replacement. $( "#searchboxform" ).keyup(function() { ...

javascriptjqueryajaxreplacewith

Click to be redirected to the same page on a different store

I have been working on a Shopify project where I implemented a pop-up that appears when the page loads, prompting users to choose between the US and UK websites. Once a user clicks on one of the options, the pop-up either closes (UK) or redirects them to ...

javascript

AngularJS written plugin in Javascript

I developed an app using Rails and AngularJS. A startup has reached out to me about transferring the technology to their website, but they have limited tech resources. The goal is to create a seamless integration process. The idea is to make it similar to ...

javascriptruby-on-railsangularjspluginscoffeescript

Loading 500,000 entries individually into mongodb results in a memory overflow

I am currently working on inserting a large volume of 500,000 records into a MongoDB collection. These records are stored in a CSV format, parsed, and then saved to an array. I am using a recursive function to insert the records one by one, and when a reco ...

javascriptnode.jsmongodbexpressmongoose

Is the Angular Karma test failing to update the class properties with the method?

I am struggling to comprehend why my test is not passing. Snapshot of the Class: export class Viewer implements OnChanges { // ... selectedTimePeriod: number; timePeriods = [20, 30, 40]; constructor( /* ... */) { this.selectLa ...

javascriptangulartypescriptunit-testingkarma-jasmine

Craft a Flawlessly Repeating Sound Experience - Online

I'm facing a challenge in creating a flawless loop of an audio file. However, all the methods I've tried so far have resulted in a noticeable gap between the end and the start. Here are the approaches I experimented with: The first approach inv ...

javascripthtmlaudiohtml5-audioweb-audio-api

Problem encountered when attempting to utilize the spread operator within .vue files in an Elixir Phoenix 1.3 application

I'm facing an issue while building Vue.js components that involve using the spread operator to map states from Vuex within my Phoenix 1.3 application. The JavaScript compile errors I encountered are causing some roadblocks: 26 | }, 27 | compu ...

javascriptvue.jsbabeljsphoenix-frameworkbrunch

I am facing an issue in my Vue Project where the CSS does not recognize URLs enclosed in quotes

When attempting to pass over a quoted URL to background-image or cursor, I'm facing an issue where the file simply doesn't load. I am currently working with Vue and have installed the following libraries: Vuetify, SASS, SASS-Loader, and Node-S ...

javascripthtmlcssvue.jssass