Images loading slowly causing scrolling to be slow

I've developed an image manager that displays a fixed grid of images in thumbnails. The size of the thumbnails is already relatively small, so reducing them further is not an option. To improve performance, I implemented lazy loading and used a debounce function to check if the images are within the visible region. This sped up the launch of my image manager significantly. However, when scrolling while new images are being loaded, the scrolling experience becomes very slow. Is there a way to address this issue or optimize the process of loading images further?

EDIT:

Is there a method to prevent scrolling while a new set of images is being loaded, similar to how Youtube prevents scrolling when more comments are still loading?

javascriptcssangular

Answer №1

Consider not loading all images simultaneously to account for users who scroll quickly (utilizing Lazy loading). I understand the tendency of online users to browse rapidly.

Here are a few recommendations:

  1. Implementing Lazy loading correctly is crucial. You can find a list of effective techniques here, choose what suits your needs best.
  2. Despite mentioning that the thumbnails are small, simply specifying smaller dimensions may not be enough. Ensure you have two folders on your hosting server – one for Actual images and another for Thumbnails.
  3. Even with precautions in place, users may still upload heavy images. In such cases, resize the images on the client end before uploading them to the server. Maintain separate copies for Actual images and Thumbnails.
  4. For product images, opt for PNGs as they offer better quality compared to BMPs and JPGs. You can compress them using online tools like or software such as .

I hope these suggestions help resolve your issue, as they did for me.

--N Baua

Answer №2

The reason behind the sluggish scrolling was my repeated use of getBoundingClientRect() to locate new visible images while other images were still in the process of loading. This triggered a reflow, slowing everything down significantly.

To resolve this issue, I switched to loading images in batches to prevent getBoundingClientRect() from being called while images are still loading.

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

Issue occurred when trying to load controllers during the migration process from AngularJS1 to Angular6

Currently, I am in the process of upgrading AngularJS1 components to Angular6. My strategy involves creating wrappers for all existing AngularJS1 components by extending "UpgradeComponent" and storing them under the folder "directive-wrappers". However, wh ...

angularjsangularng-upgradeangular-upgrade

When the user fails to make a selection, the Button will be disabled

I need assistance in disabling the button once no emojis are selected. this is my HTML code, I have a selection of emojis to choose from (and get the value of the selected emoji). However, I am struggling to implement this functionality as I need to retri ...

angular

What causes my browser fingerprint to consistently remain unchanged?

declare var Fingerprint2: any; @Component({ selector: 'my-app', template: `Hello`, }) export class App { constructor() { new Fingerprint2().get(function(result, components){ console.log(result); // Device fingerprint as a hash va ...

javascriptangularbrowserhashfingerprintjs2

Exploring the concept of nested arrays in Angular 2 using Typescript

I'm exploring the possibility of defining an array in Angular 2 that contains multiple other arrays within it. To clarify, here's what I had initially: export class PaymentDetails { account: any[]; bpNumber: number; } The issue with t ...

htmlarraysjsonangulartypescript

JQuery form plugin - submitting a form automatically on onchange event

As a beginner in JQuery, I am looking to utilize the JQuery form plugin for file uploads and would like to trigger the form submission as soon as a file is selected. This should occur upon the onchange event of the input tag: myfile. <html> <body ...

javascriptjquery

Using Vue.js to send a slot to a child component in a nested structure

Check out this interesting modal component configuration //modal setup <template> <slot></slot> <slot name='buttons'></slot> </template> Imagine using it like a wizard //wizard setup <template> ...

javascriptvue.js

The moment a connection is established, the link abruptly vanishes - NodeJS and MYSQL

Lately, I've been facing a persistent issue with my node application that suddenly started crashing every time a connection is established. This problem emerged out of nowhere after my application had been running smoothly for months. The crash occurr ...

javascriptmysqlnode.js

Retrieve the text and image simultaneously using jQuery

I need to retrieve either text or image within a modal. Use textCont to retrieve text. The content within a div can be either text or image. It will retrieve whatever is present there. Below is the JavaScript code for text retrieval. var contId = 0; var ...

javascriptphpjquerylaravel-5

Mixin for conditional input styles in Sass

I am interested in developing a conditional sass class that can be customized based on an argument provided. I am unsure about the terminology for this feature. For instance: <img class="width-200" .../> I would like to create a sass mixin that tak ...

csssass

Switch out the play pause button on an embedded YouTube video player

Is it possible to customize the play/pause button on YouTube iframes using CSS? I have several iframes and would like to change the default red play button. I've attempted the following code: .ytp-large-play-button{ background: url(play.png); } ...

javascripthtmlcssangulariframe

Struggling to get custom button hover styles to work in React?

In the React project I'm working on, there is a button that has been configured in the following manner. <label style={styles.label}> <input style={styles.input} type="file" accept="image/*" onChange={this.onUpload} /& ...

cssreactjsbuttonhover

What could be the reason for the absence of margin on the top and bottom

.separator { border: 1px solid #000000; margin: 10px; } <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>Separator</title> </head> <body> &l ...

htmlcss

Using WebDriver Selenium to choose an element within a table following another element

The webpage features a user details table with a functionality to delete users. To remove a user, I must select the row based on the username and then click the "Delete" button. The structure of the HTML table is as follows: <table id="tblUsersGrid" ce ...

cssseleniumxpathselenium-webdriver

Challenges of Integrating Auth0 with Angular2/.NETCore Project

I am struggling to integrate this Custom Login auth0 service because I am facing issues with the imports. The problem arises specifically with the usage of declare var auth0: any. Every time I attempt to use it, I encounter the following error: EXCEPTION: ...

angularauthenticationtypescriptasp.net-coreauth0

Lost variable during the ajax call

Encountering a peculiar issue while attempting to pass a variable as a parameter to a nested ajax request callback: $('form').on('submit',function(e){ $.ajaxSetup({ header:$('meta[name="_token"]').attr('conte ...

javascriptjqueryajax

Check the data from the radio button selection

I am facing an issue with reading the values of radio buttons in a list, all of which have the same id. Despite trying to retrieve the value of each individual radio button, my code only reads the value of the first radio button. <script src="//ajax. ...

javascriptjqueryasp.net-mvcasp.net-mvc-4

Maintaining input focus in AngularJS when a button is clicked

How can I ensure that the focus remains on the textarea when clicking a button inside a dynamically generated directive template? <input type="text" ng-model="myText" id = "area1" ></input> The buttons are created dynamically using a dire ...

javascriptjqueryhtmlangularjs

Retrieving the value from an array within a jQuery object

I unexpectedly found myself tasked with debugging some jQuery, which is not my usual area of expertise. The current scripts are trying to retrieve a value from a textbox rendered by jQuery, but they are failing. Upon inspecting the DOM in Chrome, I notice ...

javascriptjquerydom

Universal form submission via ajax

Issue with ajax/javascript: I am working on an application that includes multiple forms. My goal is to create a generic JavaScript function that can submit forms to their respective controllers by using the form ID. I have successfully retrieved the form I ...

javascriptphpajaxforms

incorporating new content into a jQuery list widget

i am currently exploring this demo for niceforms: http://www.emblematiq.com/lab/niceforms/demo/v20/niceforms.html i want to understand how i can integrate a datasource with the existing list on this page: <select size="4" name="languages[]" id="langu ...

c#javascriptjqueryasp.net