What could be causing this excessive lag?

I've been developing a new website, but the "buttons" I'm using seem to be causing significant lag. I need help resolving this issue.

You can view the website here:

The problematic code snippet is shown below:

<td>
    <a href="templink-info.html">
    <img style="display: none" src="images/icons/hover-info.png"/>
    <img src="images/icons/info.png"
        onmouseover="this.src='images/icons/hover-info.png';
            document.getElementById('home_text').style.display = 'none';
            document.getElementById('info_text').style.display = 'block';"
        onmouseout="this.src='images/icons/info.png';
            document.getElementById('home_text').style.display = 'block';
            document.getElementById('info_text').style.display = 'none';"
        onclick=""/>
    </a>
    <h3>Info</h3>
</td>

Accompanied by the relevant CSS styles:

#icon tr td img{
    width: 100px;
    height: 100px;}
#icon tr td p{
    margin: 0px;}
#icon tr td{
    text-align: center;
    width: 150px;}
#icon{
    margin-left: auto;
    margin-right: auto;}
javascripthtmlcssimage

Answer №1

Visit this link for a cool CSS trick!

Increase the responsiveness of your website by utilizing a single image containing both states of a button, positioned larger than the button itself. By changing the background-position property on mouseover using CSS, instead of loading a new image each time, you can smoothly transition between button states. This method is quick and efficient, resulting in improved performance for your site.

Answer №2

Optimize your images to improve website loading speed.

If you encounter any issues, consider sharing the problem on a platform like jsFiddle for assistance. It's possible that your website is functioning normally without any noticeable delays.

To add an image attribute, you can modify the background of the attribute or use JavaScript to implement some interesting features.

For example, I have previously used background-image and modified it on :hover state for similar purposes.

demonstrates this concept.

Answer №3

When you first hover over the images, there may be a slight delay due to the fact that the new (hover) images were not initially loaded into the browser's cache. This means they have to be fetched and loaded when you first mouseover, causing the delay. However, subsequent passes should be as fast as expected.

To potentially solve this issue, one option is to preload the images in the background as soon as the page loads. Here is an example from a related question:

function preloadImage(url)
{
    var img=new Image();
    img.src=url;
}

preloadImage('images/icons/hover-info.png');

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 anchor is ineffective (directs to the # but stays in place)

Every attempt I've made to find a solution online has failed. When I hover over the link, it directs me to the correct URL, but the page doesn't move. I'm using an up-to-date version of Chrome. Below is the code snippet: Edit: It seems tha ...

htmlcssanchor

Is there a way to activate a click event on a particular child element within a parent element?

When attempting to click on a specific descendant of an element, I located the ancestor using ng-class since it lacked an id. yes = document.querySelectorAll('[ng-controller = "inventoryController"]') Having found the desired ancestor, ...

javascripthtmlangularjs

What could be causing React to render only the final two elements of my array?

I am currently working on a project where I need to display a series of images from a folder. While I have managed to accomplish this, I am facing an issue where the images are being displayed in rows of 2. Although the implementation is successful, it see ...

javascriptreactjs

Retrieving data from a React state in one component and utilizing it in a separate component

Thank you for taking the time to assist me with this challenge. I am currently working on a project that involves creating the state goodData in one component called AddProduct and accessing it in another component named ActionBox, both within the same j ...

javascriptreactjswebreact-hooks

Issues with the proper display of Bootstrap 4 in Django are causing problems

I am currently in the process of setting up Django to work with Bootstrap. Despite my efforts, I can't seem to get it functioning correctly and I'm unsure of where I may be making a mistake. Initially, I am just trying to display a panel. You can ...

pythonhtmlcssdjangobootstrap-4

Tips for updating CSS styles for multiple innerHTML elements using a JavaScript for loop

<div id="test"></div> <script type="text/javascript"> window.names=["jin kazama", "nina williams"]; window.values=[25, 37]; len=names.length for (var i = 0; i < len; i++) { document.getElementById('test').innerHTML+ ...

javascriptjqueryhtmlcss

Achieving equal heights for div boxes while aligning list items inside

I have 8 green boxes on my site, each containing an image and either 3 or 4 list items with text only. The issue I'm facing is that the boxes are not of equal height due to two reasons: (1) One box may have an extra list item pushing the rest down, or ...

htmlcsslistdivider

What steps do I need to take to incorporate Material UI icons into my REACT project?

After reviewing the documentation, I found it somewhat confusing with terms such as "MaterialIcon, SVGIcons, Icons". If you are interested, you can check out the link here. I am looking for a simple explanation of the process from installation to using th ...

javascriptreactjswebmaterial-ui

Incorporate a PHP GET parameter through an onclick event to redirect using window.location in JavaScript when a button is

I am trying to modify the onclick event of buttons that look like this: <button class="buttons" onclick="window.location='page_test.php?VAR=1&VAR2=2'">BUTTON 1</button> <button class="buttons" onclick="window.location='p ...

javascript

Are you in favor of side-to-side scrolling?

I can't quite recall where I've encountered this concept before, but I do know that there must be a method for creating a horizontal scroll. Imagine you have multiple DIVs in the following structure: <div class="container"> <div> ...

htmlcss

Observing Node.js processes to track the peak memory usage of each process

Is there existing monitoring software that can track newly spawned node.js processes on my machine and display the maximum memory usage when the process ends? If not, how can this be achieved effectively? I have identified the specific Node.js processes I ...

javascriptnode.jsv8

Selenium: A guide to specifying CSS for webpages with multiple elements sharing the same name

Looking for assistance with CSS selection: <table id="userPlaylistTable" cellspacing="0" cellpadding="0"> <div class="numCellWrapper"> ... When defining a css selector, how can I target a specific element among multiple elements of the same ...

cssselenium

Verify the level of opacity in the image

I'm working on a website that allows users to upload PNG images and save them. However, before they can save the image, I need to check if it contains transparency. Is there a way to determine if an image is not 24-bit using JavaScript? <img id= ...

javascriptjqueryhtmltransparency

Python and Selenium are a powerful combination, but sometimes you may encounter the error message "Element cannot be clicked at point (x,y)

I'm trying to automate the selection of a checkbox on a webpage using Selenium and Python with this line of code: self.driver.find_element_by_id('lg_1166').click() Unfortunately, I'm encountering an error message: Message: Element < ...

htmlpython-3.xseleniumfirefoxselenium-firefoxdriver

Elements Fail to Display After Updating State with UseState

This question presents a challenge due to its complexity, but I will try to clarify the situation before delving into the code implementation. My aim is to create a screen for managers displaying all their drivers with minimal information and an edit butto ...

javascriptreactjsuse-state

Aligning a div within another div and organizing its elements

Hey everyone, I'm struggling with centering a div that contains two Tumblr posts columns, as shown in the screenshot linked below. I really want it to be centered on the page where there is no sidebar present. Additionally, I'm hoping to get the ...

htmlcss

Problem with CSS: In Chrome, text fields have 3px additional margin-right

https://i.sstatic.net/I8mzi.jpg I am facing an issue with the margins of my text fields. Even though I have set a margin-right of 5px for each field, Google Chrome seems to be adding an additional 3-4px automatically. This problem is evident when I dynami ...

javascriptjqueryhtmlcssgoogle-chrome

Invoking a Components function from a Service in Angular may lead to a potential cyclic dependency issue

I am facing a challenge where I need to call a function from my filterComponent(component) within my engagementService(service). The function in my filterComponent accesses an array that is located within the engagementService. It uses the data from this ...

javascriptangular

"Looking for a solution to the ESLint error related to 'no-unused-var' and Google Maps integration. How can I effectively resolve

I'm struggling with what seems to be a simple problem I tried adding /* export myMap */ or /* global myMap */ at the beginning of the script but I keep getting errors Code HTML <h1>My First Google Map</h1> <div id="googleMap" ...

javascripthtml

Testing components in Angular using Renderer2

Recently, I came across an Angular component with the following structure: constructor( @Inject(INJECTION_TOKEN_WINDOW) private window: Window, private renderer: Renderer2 ){} ngOnInit() { this.renderer.addClass(this.window.document.body ...

javascriptangularunit-testingjasmine