"Which is better for maximizing the efficiency of an image grid: CSS or Jquery? What are the key

As a UX Designer looking to enhance my coding skills, I must admit my code may not be perfect. Please bear with me as I navigate through this process.

I am in the process of revamping my portfolio website. The original seamless grid was created using a Masonry-like JQuery plugin, but it's quite slow.

To improve performance, I decided to switch to using Masonry, however, I still have concerns about speed. Therefore, I stumbled upon an all-CSS solution that I hope will load faster. https://css-tricks.com/seamless-responsive-photo-grid/

After seeking advice on another platform, I discovered that the issue might not lie with the sluggish plugin but rather in preloading 3MB of images. Despite resizing and optimizing the images to reduce memory usage significantly, the loading speed remains a problem. What could I be missing? How do larger websites manage to load numerous images smoothly while my code struggles? Are there additional optimization techniques I should consider implementing, such as incorporating a loading screen?

[EDIT:] All images have been compressed and optimized. While the images load fairly quickly, the main issue is the Flash of Unstyled Content (FOUC) during the process where JavaScript reformats the images.

javascriptjqueryhtmlcssoptimization

Answer №1

It is common to preload 3MB of images, which is the total weight of your images. This is not a problem and is considered normal behavior.

To optimize your website's performance, you may want to consider using an Image Compression Tool. If you anticipate adding more images to your page, implementing Lazy Load with infinite scroll could be beneficial. I personally recommend using this jQuery plugin for static pages.

Edit:

If your website will not have a large number of images, utilizing lazy load and implementing a fade effect once the image is loaded can improve user experience. Two popular jQuery plugins that can help achieve this are:

  • Lazy Load (commonly used)
  • Unveil (minimalistic and quick)

Answer №2

If you want to optimize your website's images, the best approach is to utilize Photoshop's "Save for the Web" feature. However, in addition to image size, there are various factors that can impact a site's loading speed.

Here are some steps you can take:

  • Reduce the size of your images without compromising quality
  • Select a reliable hosting provider
  • Combine and minimize CSS & JS files
  • Limit the number of requests
  • Enable caching
  • Utilize a Content Delivery Network (CDN)

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

Whenever a tab is refreshed, the page will automatically redirect to the first tab

When using the application below, if the user is not in Tab 2 or Tab 3 and clicks on refresh, the page automatically goes to Tab 1. Is there a way to prevent this behavior and keep the user in their current tab after refreshing? Any suggestions on how to ...

htmlcssrshiny

The Super Sub menu is failing to display correctly as intended

I encountered an issue while trying to create a Super sub-menu. The problem is that the super sub-menu appears when I hover over the main menus, instead of the sub-menus. I suspect there may be something wrong with the display: none; attribute, but I' ...

htmlcsscss-selectors

jQuery forsake any unresolved AJAX requests

Is there a simple method to cancel all active jQuery AJAX requests? In my application, handling multiple simultaneous requests can create issues due to race conditions. I have implemented temporary solutions like using flags to check request completion s ...

jqueryajax

React - output from forEach() function is not defined

I am facing a challenge in rendering prop values from a nested object. There are two issues that I'm encountering: 1. The JSX code line (with variables) is not showing up in the browser 2. When I console log the variables with .forEach() methods, th ...

javascriptreactjs

Saving user-generated inputs within a React.js component's state, focusing on securely handling passwords

Curious about forms in React.js? I don't have any issues, but I'm wondering if there are potential flaws in my approach. I've set up a basic form with two inputs for email and password: <input type="email" name="email" value= ...

javascripthtmlreactjs

Increased pixels being incorporated into my line spacing

Looking for a solution: A <div> containing only one word at a font size of 16px with a line-height set to 1. Encountering issues with extra space above the text in Chrome and Firefox, while the text bleeds slightly out of the bottom. IE exacerbates t ...

css

Is it still beneficial to incorporate image sprites in the design of a mobile web app?

As I work on developing a mobile web app, I find myself debating whether to use individual images or stick with image sprites similar to what I do for my desktop site. My main concern is the potential increase in file size from consolidating all the images ...

htmlcssmobile

React is throwing an error that says, "You cannot use the import statement outside a

My journey with learning React has just begun. I followed the steps outlined in the starting guide at https://react.dev/learn/add-react-to-an-existing-project, but unfortunately, I encountered an error: "Cannot use import statement outside a module." Here ...

javascriptnode.jsreactjs

"Upon completion of Uploadify, the queue will undergo a

I'm looking to personalize Uploadify by updating the queue item linked to a completed upload with information from my upload script. For example, if there's an upload error, I want the background color to change to red and display the response m ...

phpjqueryeventsqueueuploadify

Submitting values to a different page in PHP using jQuery AJAX

I am having trouble sending data to another page using jQuery AJAX and PHP. Below is the form located in page1.php: <form method="post" action="page1.php"> Name : <input type="text" id="N_Txt"> Email : <input type="text" id="Emai ...

phpjqueryajax

What techniques can I use to modify an object while it's being iterated through?

I've been attempting to manipulate the object while looping through it, but unfortunately, it's not working. How can I modify it so that the constant patient includes the property lastActivity inside the this.model array? My code looks like this ...

javascriptangulartypescript

What is the best way to position an image alongside an h2 heading?

Perhaps the technology stack is not relevant in this case, but I am currently working on a nextjs project with tailwind for styling. I am attempting to place an image next to an h2 tag, but encountering unexpected behavior from the image. It seems as thoug ...

htmlcssnext.jstailwind-css

What is the protocol for displaying linear gradients that overlap?

My objective is to create a unique cutting corner effect using linear gradients. Achieving this on one corner is straightforward: body { background: #eac996; } .box { width: 100px; height: 100px; margin: 100px auto; padding: 20px; backgroun ...

csslinear-gradients

What is the method to conceal a certain element in jQuery based on the value of another element?

I am dealing with the following HTML structure: <button id="hideToggle">show/hide</button> <form id="item"> <div>Item 1 <input name="item1" type="number"/></div> <div>Item 2 <input name="item2" type="nu ...

javascriptjquery

Enhancing a Bootstrap 4 navbar menu system with padding tweaks

Just starting out with Bootstrap 4 and creating a practice page with a header to familiarize myself with the navbar system. I have put together this jsFiddle (full code) for reference, but essentially, my page structure is as follows: index.html <nav ...

htmlcsstwitter-bootstrapbootstrap-4

Can one intercept the window.location.replace event?

Suppose I am currently browsing the URL "example.com/somepage#somehash" and then decide to execute window.location.hash = "anotherhash", the URL will be updated to "example.com/somepage#anotherhash". This action triggers the window.hashashchange event. On ...

javascripthtmldom-eventshashchange

Adding parameters to a URL is a common practice

"Adding additional information to a URL that was previously included?" I apologize for the confusing title, but I can't find a better way to phrase it. Perhaps an example will make things clearer. Let's say I have URL 1: http://example.com/?v ...

phpjavascriptquery-string

Issue encountered when attempting to utilize Next-Auth alongside Credentials Provider to authenticate within a pre-existing system

I am currently utilizing the Next-Auth Credentials provider for authentication purposes through our existing API. Following the guidelines provided at https://next-auth.js.org/configuration/callbacks the code snippet used is as follows: callbacks: { ...

javascriptnext.jsjwtnext-auth

Using data from an API, I am implementing JavaScript validation for my dropdown select menu

Using an API, I am able to access information about the city's subway stations through a select option. Currently, I can only display details about one station (Balard). However, I would like to be able to display information about other stations tha ...

javascripthtmljsonapi

Retrieving information from an AJAX callback

Is there a way to extract the URLs from PHP data? Here is an example script that may help you achieve this: PHP $query = 'SELECT * FROM picture LIMIT 3'; $result = mysql_query($query); while ($rec = mysql_fetch_array($result, MYSQL_ASSOC)) { ...

phpjavascriptjqueryajaxjson