Tips for avoiding content shift caused by image loading

I am working on a 4 column layout with image thumbnails.

https://i.sstatic.net/ZNaNg.png

Here is the code snippet:

<!DOCTYPE html>
<html>
   <head>
      <meta charset='utf-8'>
      <title>KTM Cart</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      <meta content='width=device-width, initial-scale=1' name='viewport'>
   </head>
   <body>
      <div class='container-fluid'>
         <div class='row'>
            <div class='col-md-3 col-sm-6 col-6 mb-4'>
                ...
             ...
         
          ... more HTML code here ...

        <div class='row'>
            <div class='col-md-3 col-sm-6 col-6 mb-4'>
               ...
         ...
      </div>
   </body>
</html>

The issue I am facing is that the images in the layout initially appear collapsed and cause a jumping effect when they finish loading. How can I display an empty box of fixed size before the image finishes downloading to prevent this content jumping? I have tried wrapping the image in a div tag with fixed height and width but it did not work. Any suggestions or help would be greatly appreciated. Thank you!

UPDATE:

You can see a similar technique used on the BBC website where the images are displayed in fixed-size boxes to prevent content jumping.

htmlcsstwitter-bootstrap

Answer №1

To ensure the layout remains stable while the image loads, it's important to enclose the image within a div and specify a height for the image in the CSS. This way, the height will be rendered until the image is fully loaded.

Answer №2

Your approach of enclosing <img> with <div> and setting a fixed height is indeed valid. However, it's possible that there are float-related issues causing the problem to persist. Consider adding either float:left or overflow:hidden to the enclosing <div> with the specified height.

Answer №3

Yes, I found this trick to be quite effective when the wrapping div for the image has the class "item".

.img-thumbnail {
    max-width: 100%;
    height: auto;
}

.item {
    min-height: 300px;
    max-height: auto;
    float: left;

}

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

Scrolling through image galleries with automatic thumbnails

I am looking to create an automatic image scrolling feature on my webpage using a bunch of images I have. I have searched for a solution but have not found one that fits my requirements. I don't think a carousel is the right approach for this. The sol ...

javascriptjqueryhtmlcssbootstrap-4

How to use jQuery to extract a particular text from an anchor tag

If I want to choose a specific anchor text and make changes to it, I can do so by targeting anchors with a certain href attribute. For example, on a page with multiple unordered lists, each containing different links: <ul> <li><a href="v ...

javascriptjqueryhtml

Achieving a collapsing navbar on click in Bootstrap 5

Is there a way to collapse this navigation bar after clicking on a link, without using a JavaScript event listener or the data-bs-toggle and data-bs-target methods mentioned in this article? I tried both methods but they are not working with my code. Here ...

javascripthtmlbootstrap-5

Ways to adjust the background color

Is there a way to change the background color instead of font color in this code snippet? def cloud_height_style_function(vals): return pd.cut(vals,[-np.inf,199,499,999,3000, np.inf], # need to review the bin a bit labels=[f'color: ...

pythonhtmlcsspandasstyles

Is there a way I can implement a user-friendly playlist feature in my object-oriented HTML5 JS audio player that allows users

I have created a functional audio player using HTML5 and Javascript, along with some basic CSS. However, I am looking to enhance it by adding a clickable playlist feature. I want the name of the currently playing audio track to be displayed, and users shou ...

javascriptjqueryhtmlaudioplaylist

Error: The token < was not expected in ng2 bootstrap code

Having encountered the error Unexpected token < while using ng2 bootstrap, I included 'ng2-bootstrap': 'node_modules/ng2-bootstrap' in the configuration file below. System.config.ts (function (global) { System.config({ ...

jquerytwitter-bootstrapangularng2-bootstrap

Designing Progress Bars with CSS3

I'm currently working on enhancing the appearance of the progress bars across my website, all of which are built using jQuery UI. My goal is to achieve a design similar to the one shown below (featuring a stylish bevel effect and a visually appealing ...

css

JS causes the navigator to malfunction

UPDATE: Greetings! I have developed a navigation bar that loads various pages into a specific div. Here is the source code for the navigation bar: <div id="navBar"> <ul> <li><a href="#" onClick="document.getElementById('bott ...

javascripthtmlmysqlcss

Utilizing CSS to Rearrange Columns Depending on Screen Size

Check out the progress on this page: If you scroll to the bottom, you'll find a list of links - displayed in 4 columns in the regular view. When you resize the screen, they shift into a single column. I want them to show as a single column on an iPh ...

htmlcss

Tips for increasing the size of a parent div when a child div is displayed with a set width?

Is there a way to make the parent div automatically expand when the child div with a fixed width is displayed onclick? Goal: I want the child div to show up when I click the link, and at the same time, I need the parent div to expand or scale to fit the ...

jqueryhtmlcss

The navigation menu that usually appears on mobile devices is surfacing on desktop screens instead - update: images now

I have recently been working on my website juniorgoldreport.com, which was created using WordPress. The plugin I am using specifically for the mobile nav bar is The functionality and ease of use of this plugin are incredible. The setting to show the toolb ...

htmlcsswordpress

Receiving a 502 Bad Gateway error when attempting to request a CSS file via HTTPS

After recently adding SSL to some pages on my website, I encountered an issue when trying to call a secured web page <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="https:/ ...

asp.netcssssliis-7https

Retrieve the value of a JavaScript variable within an HTML or EJS document

My JavaScript file, named main.js, contains a JSON object like the following: const person = {}; person.AGE = '17'; person.GENDER = 'Male'; To load this file in my .ejs file, I use the following code: <script type="text/javascript ...

javascripthtmlnode.jsejs

Activate Google Map marker through an external click

I need help with implementing anchor buttons for different locations that highlight the location details on click. For example, when clicking on "location1" button, I want to highlight location1 on Google Maps. Check out the demo on JSFiddle google.maps.e ...

jqueryhtmlgoogle-mapsgeolocationmarker

Changing the Direction of News Ticker Movement from Right to Left

I need to switch the news ticker movement direction from right to left to left to right because I will be using Arabic language, so it is crucial to change the movement direction. Despite trying for several days, I have been unable to find a solution. HTM ...

javascripthtmlcssright-to-left

Craft an engaging and dynamic Image map with SVG technology to elevate responsiveness and interactivity

I'm currently working on a website and I need to create two clickable sections on the home page. Each section will lead to a different specialization of the company. To achieve this, I decided to use a square image split into two right-angled triangle ...

javascripthtmlcsssvgresponsive

Ways to display the success value prior to the completion of AJAX jQuery from the PHP page

Here is the AJAX code I am using: $(".content").empty(); $.ajax({ type: 'POST', url: 'xyz.php', data: $('.chk:checked').serialize(), success: function(data) { $(".content").append(data); } }); M ...

phpjqueryhtmlajax

Struggling with my Transform Origin in CSS for SVG

I have two classes (firstCircle & spin) on the first circle on the left, and I'm attempting to make it rotate in place. After removing them from the css so you can see the circle, I am having trouble with transform-origin. My code seems wrong as i ...

csssvg

Creating a stylish login form with Bootstrap: How to effortlessly center it on your webpage

My login form is currently positioned to the left. However, I am trying to move it to the center of the page. I attempted some CSS styles without success. Interestingly, when I removed '{% extends "common/base.html" %}' from the code, the form di ...

htmlcssbootstrap-4

How to access the api variable in JavaScript

When attempting to retrieve variables from an API object, I encountered the obstacle of them being nested inside another object named "0" in this particular case. Here is a screenshot from the console: enter image description here Below is the JavaScrip ...

javascripthtmlapijavascript-objectsconsole.log