When you scroll through the page, white blocks suddenly appear

After completing a website, I noticed some white blocks appearing when scrolling. You can view the site here. This issue occurs on both mobile and desktop devices during the initial load only. Could this indicate that the page has not fully loaded yet? If so, perhaps extending the loading screen time could solve the problem. How can I determine when the page is completely loaded? If it's not due to loading issues, what else could be causing this glitch?

To replicate the issue, open the website in a browser, wait for the loading screen to disappear, then use the mouse scrollbar to scroll down (the issue doesn't occur with the on-screen scrollbar).

If you access the site from a mobile browser and scroll down, you'll notice the white blocks more clearly.

I'm unsure why you're unable to reproduce the problem. Please refer to the screenshot I've attached from my mobile device. The white blocks appear while scrolling up and down. See image: https://i.sstatic.net/NfbtJ.jpg

javascriptjqueryhtmlcss

Answer №1

When the cache is cleared, your page sends out 34 requests and its total size is 23.7 MB. A whopping 18 of those requests are for images, totaling at 23.3MB in download size. It seems like you might be trying to load this site on a mobile device.

To fix this issue, consider resizing or optimizing your images for the web. Those pesky white blocks show up because the image container hasn't finished loading as the images are still being downloaded. Remember, mobile devices have smaller cache sizes compared to computers.

Take a peek at the Chrome network tab when loading the site with an empty cache for insights.

Once the images are loaded and the page is revisited, the data transfer reduces significantly to 5.7 KB. However, there are still 34 requests, but the content is rendered from the cache. Consider setting far future expiry dates for your images if they will remain static on your site.

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

The cursor in a contenteditable element fails to return to its original position after adding a new line and then deleting it

I have come across a basic HTML code snippet: span { outline: none; } hello <span contenteditable="true"> world </span> Upon testing, I observed that each time I press ENTER within the contenteditable span, the cursor moves to a new ...

htmlcontenteditable

How to use React hooks to flip an array

Is it possible to efficiently swap two items in an array using JavaScript? If we are dealing with a boolean, one could achieve this by: const [isTrue, setIsTrue] = useState(false); setIsTrue(!isTrue); However, what if we have an array? // Let's ...

javascriptreactjsecmascript-6react-hooks

Remove the concluding statement from the HTML string if it exceeds the capacity of the iPhone's webView

I have an array of content with certain sections in bold. The bold parts can be located anywhere within the text, so I am utilizing a webView to display an HTML string with appropriate bold tags. However, I am encountering issues where the webViews do not ...

iphonehtmlwebviewcrop

Specific category of location on Google Maps

I am currently building an application using Cordova and Ionic. I need to implement a map in my app that will display only specific establishments, such as police stations or doctors' offices. This is the code I have so far: var posOptions = {time ...

javascriptangularjscordovagoogle-mapsionic-framework

What causes the error "Failed to load SWC binary for win32/x64" when using getStaticProps?

Encountering an issue while using getStaticProps() in a Next.js application, resulting in the following error when running the app: warn - Attempted to load @next/swc-win32-x64-gnu, but it was not installed warn - Attempted to load @next/swc-win32-x64-ms ...

javascriptreactjsnext.js

Using AJAX and Jquery to stop the page from reloading when a button is clicked

I am currently working on a gridview that displays all transactions of a merchant, including pending, approved, and rejected transactions. The gridview is set up with template and includes two buttons. My goal is to prevent the page from reloading when one ...

jqueryasp.netajax

Adding Text Above a Material Icon in Angular: A Guide

Here is some sample HTML code to consider: <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <mat-icon class="fa fa-folder" style="font-size:48px;"><span style="color: re ...

htmlcssangulariconsmat

Exploring the Functionality of Cookies in Nuxt 3 API Endpoints and Middlewares

Can cookies be utilized on the server side in Nuxt 3? For instance, I need to set a cookie in an API and then access its data in middleware: // ~/server/api/testApi.ts export default defineEventHandler(event => { /* setCookie('myCookie', ...

javascriptvue.jsnuxt.jsserver-side-renderingnuxtjs3

Encountering the error "Vue 2.0 encounters an undefined push during router.push

I'm currently working on a project that involves implementing a function to route the list of subMenus displayed by the mainMenu. Each subMenu is identified by its specific name, which I would like to append and use as the route path that I am aiming ...

javascriptjqueryvue.js

How can I load only specific images on a webpage using HTML?

I attempted to implement an image filter for my website by using the code below: <script> function myFunction() { // Initialize variables var input, filter, ul, li, a, i; input = document.getElementById('myInput'); filter = input.value.toU ...

javascripthtmlcss

To display the newly received ajax content on the page, I must ensure that the DOM can properly render the new divs

Currently, I have a page that undergoes a lot of ajax operations. The ajax function loads a table of products which contains buttons for updating and deleting items. However, these buttons don't respond unless I include $(document).ready inside the su ...

jqueryajax

The scrolling content is positioned beneath the primary header and navigation bar

I'm currently in the process of designing a website where, upon clicking a navigation button, part of the page scrolls while the top header & nav bar remain fixed. Although I've managed to get the scrolling functionality to work and keep the top ...

jqueryhtmlcss

Can anyone recommend a reliable continuous integration pipeline for StrongLoop and GitHub integration?

How can you effectively develop websites using strongloop and github/bitbucket, ensuring smooth transitions from development to testing to production? I understand the key components of a successful workflow, but I'm interested in hearing about strat ...

javascriptnode.jsexpressnpmstrongloop

Submitting JSON data using JavaScript

My goal is to send a username and password to my backend server. However, I am encountering an issue where the data does not successfully reach the backend when using the following code: function register() { var text = '{"username":"admin1","pass ...

javascriptjsonpostrequest

Getting URL parameters in NextJS when using Custom Document can be achieved by accessing the `ctx`

Currently, I am utilizing NextJS for generating SSR pages that are language-specific. I want to specify the lang property to indicate the language of the text. Here's what I have done so far: import Document, { Html, Head, Main, NextScript } from &qu ...

javascriptreactjsnext.jsinternationalization

I am looking to host several iterations of jQuery on a content delivery network within my Nuxt application

Currently, we are loading jQuery 3.1.4 externally from a CDN on the top page. index.vue head: { bodyAttrs: { id: 'overview' }, script: [ { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min ...

javascriptvue.jswebpacknuxt.js

Is there a way to retrieve the href attribute from an <a> tag using PHP?

Similar Question: Retrieving the href attribute of an Anchor Element Provided hyperlink $link="<a href='test.php'>test</a>"; Is there a way to extract href and anchor text using PHP? ...

phphtml

Using jQuery to reload the page following a PHP form submission

Currently facing an issue as I am trying to load the same page submitted by PHP, specifically in a comment section. After users submit their message, I want to display the existing comments along with the new one. The problem arises because I'm not u ...

javascriptphpjqueryajax

Footer rises with bootstrap zooming

Hey everyone! I'm a beginner in the world of web development and currently working on creating my own website. I've run into an issue with my footer - I want it to stay fixed at the bottom even when zoomed in, but for some reason, when I zoom in, ...

htmlcssbootstrap-4footer

Node.JS program unexpectedly logging MySQL results to console and exhibiting erratic behavior

Recently, I encountered a peculiar error while working with Node.JS MySQL. Strangely, I noticed that a result was being logged in the console without any corresponding code line instructing it to do so. Even more baffling was the fact that when I intention ...

javascriptmysqlnode.jsdiscord.js