How to solve the issue of the loading graphic moving from left to center on the page in the Infinite Scroll jQuery Plugin?

While using the Infinite Scroll jQuery Plugin by Paul Irish, I have observed that every time new content is loaded onto the page, a loading graphic in the form of HTML markup is appended into the DOM:

<div id="infscr-loading" style="display: none; width: 100%;">
    <img alt="Loading..." src="loading.gif" />
    <div></div>
</div>

Upon closer observation, I noticed that as the loading graphic is removed and then reinserted during the content loading process, it seems to animate from the left side to the center of the page. How can I prevent this unintended "animation"? It appears to be happening due to the markup being detached and reinserted, but I'm not entirely sure if this is the intended behavior.

Is there a way to ensure that the loading graphic always stays centered without any animation effect?

For reference, you can find the script at this link: https://github.com/paulirish/infinite-scroll/blob/master/jquery.infinitescroll.js

I have not come across any CSS or JavaScript code causing this animation effect.

jqueryhtmlcssinfinite-loop

Answer №1

Using CSS, I was able to center the loading image on the webpage:

#infscr-loading{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
#infscr-loading div{
    margin-left: auto;
    margin-right: auto;
    width: 360px;
}

Answer №2

If you want to get rid of it 

('#infscr-loading').detach();

Answer №3

I have conducted testing with the latest version of infinite-scroll, v2.1.0.

Aligning the loading indicator in the center

To customize the appearance of #infscr-loading in your CSS, you can center the animation and text by adding the following styling:

#infscr-loading {
    text-align: center;
}

If you prefer, you can create a unique loading indicator without using the default id infscr-loading:

$('#content').infinitescroll({
    loading: {
        msg: $('<div style="text-align: center">Loading…</div>')
    }
});

Turning off the animation effect

$('#content').infinitescroll({
    loading: {
        speed: 0 // default: 'fast'
    }
});

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

Tips for eliminating the glowing effect when pressing down on the thumb of the material ui slider

Visit Material-UI documentation for Slider component. Despite setting the disabled flag for the entire slider, the thumb continues to show a halo effect when clicked. ...

javascripthtmlcssreactjsmaterial-ui

Why does the <select> input field, populated with $.each, only get filled once when dynamically creating input fields?

I am facing an issue while trying to dynamically add an input field to a form. Everything seems to work fine except for one thing: When I try to populate a select dropdown with options using $.each, it only works for the first dynamically added field. If ...

javascriptphpjqueryappendeach

Tips for getting my navigation bar menu button functioning properly?

I am struggling to make my button show the menu when clicked. I have tried various methods but still can't pinpoint the issue. I utilized the "checkbox" trick to display the hamburger button when the site width is under 500px for a responsive menu, ye ...

htmlcss

Is it feasible to access the PHP code of a website?

Is it within the realm of possibility to access and view the PHP files and codes of other websites? In other words, can individuals without access to the files see my PHP codes? If this is a concern, what is the most effective way to safeguard against it ...

phphtmllinuxsecurity

padding applied exclusively to the Bootstrap column when viewed on a large grid

Can padding be added only for the large grid and not for the medium grid? Large grid with padding: <div class="col-lg-4 pl-3"> </div> Medium grid without padding: <div class="col-md-3"> </div> ...

htmlcssbootstrap-4

"When utilizing a jQuery AJAX request to communicate with a Node.js server, the functionality only seems to

I'm diving into the world of AJAX and feeling a bit lost. On my webpage, I use an AJAX GET request to fetch comments on a post. However, there's a glitch where the request only succeeds after refreshing the page. I even tried disabling the cache, ...

javascriptjquerynode.jsajax

The parent DIV has a height of 0px, yet the child element is still visible

As I explored options for creating a navbar drop down menu with an accordion effect, I stumbled upon this informative YouTube video. The tutorial demonstrated the use of a custom component and manipulation of the max-height property of the card-content ele ...

htmlcssangularionic-frameworkionic3

The content is overflowing outside the boundaries of the div, yet there is no

I am currently utilizing jQuery to dynamically load the content of a text file into a div element. However, when the content exceeds the dimensions of the div, no scroll bar is displayed. Here is the HTML structure: <!DOCTYPE html> <html lang=" ...

javascriptjqueryhtmlcss

Safari making menu mysteriously disappear

Currently experiencing an issue on this website: specifically in Safari. When I click on "KUNDEN" in the navigation for the first time, the entire header disappears. I checked the dev console and noticed that the header content is loaded, even in the sourc ...

csssafariinvisible

The drop-down menu fails to show up when placed between ul and li elements

Can you help me troubleshoot an issue with my dropdown menu? I've been working on getting the dropdown menu to function properly on my website, but I've encountered a problem. When I resize the page to a smaller window, I can see the menu appear ...

c#htmlasp.netbootstrap-4

Modify the CSS styles (which were set by a preceding function) upon resizing the screen using Javascript

In the mobile version of a website (width less than 620px), there is a button in the header. Clicking this button triggers the "mobileNav" function, which toggles the visibility of the mobile navigation between "display: none;" and "display: flex;". This f ...

javascripthtmlcss

Using jQuery to submit a form by clicking a button or hitting the Enter key

I have a simple form for posting comments that looks like this: <form method="post" action=""> <div class="input-group"> <input type="text" class="form-control" id="chat-input" placeholder="Message..."> <span class="input-gr ...

jqueryajax

observing which specific element corresponds to the nth child?

Exploring the concept illustrated in https://api.jquery.com/eq/, imagine a scenario with the following HTML structure: <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item ...

javascripthtmljquerydom

What is the most effective method for incorporating CSS using Javascript to target a specific aria-label attribute?

Is there a way to add a CSS property to a specific tag with a particular aria-label on document load? My goal is to change the flex order of a section to 2. I need help using JavaScript to target the aria-label 'block 1' so I can set the order t ...

javascriptcsstwittertampermonkey

The content div in CSS is causing the menu div to be displaced

I have encountered a difficulty in describing the issue at hand as I am still in the learning phase and consider myself a beginner. Within my container div, there are two other divs - one for the menu and another for the content. Both of these divs float ...

csshtmllayout

What is the best way to create a complex JSON array and send it as a parameter in an ajax request?

Facing complexities with a multidimensional array, my PHP code is structured as follows: $result = array(); $count = 0; foreach($matches_lines as $lines){ $match_user = $lines["signup_username"]; $match_birth = $lines["signup_birth"] ...

phpjqueryjsonajaxmultidimensional-array

Expanding on current features with jQuery to enhance the code by incorporating validation checks for input boxes with values

Seeking assistance as a newcomer to the jQuery library. I have existing code that checks for selected values in select boxes and enables the search button accordingly. Now, I need help modifying the code to also check for input values in input boxes simul ...

javascriptjqueryhtmlforms

Retrieve the Latest Information from the Asp.Table

My table setup is as follows: <asp:Table ID="model" runat='server'> <asp:TableRow> <asp:TableHeaderCell class="col-xs-2"> Name </asp:TableHeaderCell> <asp:TableHeaderCell class="col- ...

javascriptc#htmlasp.net

The Bootstrap 4 navigation bar remains expanded on tablet screens

I recently obtained and modified a basic bootstrap 4 theme. By customization, I mean that I ensured all menu items have the same margin and added my logo. The issue I encountered is that on tablets, the navbar does not collapse as expected. I have attache ...

htmlcssbootstrap-4responsive-design

In JavaScript, the price can be calculated and displayed instantly when a number is entered into a form using the input type 'number'

Is there a way for me to automatically calculate the price and display it as soon as I enter a number into my form? Currently, the price is only displayed after I press submit. <script type="text/javascript"> function calculatePrice() { ...

javascriptphpjqueryfunction