Challenges with image loading in Jquery while navigating the menu

Encountering an issue while navigating through the site at . The left-hand side image sometimes loads and sometimes doesn't. Using the code below to change the image when switching pages:

var pic = new Image();
pic.src = "images/homeLargeImg.jpg";

Here is the backend code being utilized:

var RHigh=$('#RightPane').height() var windHigh=$(window).height()

$(pic).hide().load(function() { //debugger; $(this).fadeIn(); var marginT=(windHigh/100*5) var imgH = (marginT+windHigh)

$("#LeftPaneImage").html("<img id='triquibackimg' src='"+pic.src+"'  style='"+windHigh+"'/>")
$("#LeftPane").css("width",$("#LeftPaneImage").width());
$("#RightPane").css("margin-left",$("#LeftPaneImage").width()+10);
resize()

})

$(window).bind('resize', function() { resize() });

function resize() {

RHigh=$('#RightPane').height()
windHigh=$(window).height()

if( RHigh < windHigh)   
    {
        $("#triquibackimg").css("height",$(window).height());
        $("#LeftPane").css("width",$("#LeftPaneImage").width());
        $("#RightPane").css("margin-left",$("#LeftPaneImage").width()); 

        //----------------Right Pane vAlign--------------

                (function ($) {
                $.fn.vAlign = function() {
                    return this.each(function(i){
                    var h = $(this).height();
                    var oh = $(this).outerHeight();
                    var mt = (h + (oh - h)) / 2;    
                    $(this).css("margin-top", "-" + mt + "px"); 
                    $(this).css("top", "50%");
                    $(this).css("position", "absolute");    
                    }); 
                };
                })(jQuery);

                (function ($) {
                $.fn.hAlign = function() {
                    return this.each(function(i){
                    var w = $(this).width();
                    var ow = $(this).outerWidth();  
                    var ml = (w + (ow - w)) / 2;    
                    $(this).css("margin-left", "-" + ml + "px");    
                    $(this).css("left", $("#LeftPane").width());
                    $(this).css("position", "absolute");
                    });
                };
                })(jQuery);

                $(document).ready(function() {
                    $("#RightPane").vAlign();
                    //$("#RightPane").hAlign();
                });

    }
else
    {   
        $("#triquibackimg").css("height",(RHigh+150));
        $("#LeftPane").css("width",$("#LeftPaneImage").width());
        $("#RightPane").css("margin-left",$("#LeftPaneImage").width()); 

    //  if ($(window).height()>800){

// $("#RightPane").css("position",'relative'); // } // else{$("#RightPane").css("margin-top",60)} } }

Seeking advice on resolving this issue. Thank you.

Answer №1

Just a quick note: I wanted to chime in on this topic because I don't have the answer yet. It's frustrating that I need 50 reputation points just to leave a comment.

Now, getting back to the main point: What exactly are you trying to accomplish and what seems to be the issue at hand?

  • I've noticed that when attempting to access your website, all the large images on the left load slowly (using a Mac and Chrome). This issue appears across all pages.
  • The slow loading speed is quite noticeable.
  • I'm curious as to why you're opting for inserting the image using JavaScript rather than simply utilizing an img tag?

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

When is the best time to assign properties to mobx domain objects?

When it comes to tackling a specific problem in my react/mobx application, I'm facing challenges finding an optimal solution. Imagine having multiple boxes that need to be positioned on the screen based on various factors such as interdependency betwe ...

What steps are involved in setting up a dropdown side navbar?

Is there a way to automatically activate the next dropdown in the side navbar when I click on the 'Next' button? And similarly, can we open the previous dropdown in the side navbar when clicking the 'Previous' button? ...

What is the best way to select a specific button to handle the onSubmit event in a React form with multiple buttons

Imagine having the following HTML structure: <div id="container"></div> <p>Output: <span id="output"></span></p> accompanied by this block of JS code: function otherAction(e) { document.getElementById('output& ...

Issue with locating JavaScript controller in Angular HTML file [Node.js/Angular]

Here are all the files and folders in my project located within the same directory. If you want to check out the project on Github, you can find it here: https://github.com/JohnsCurry/learnAngular. Just to confirm, they are all in the same folder. Unfortu ...

What is the best way to integrate Vue application server with Express?

I'm currently using a Vue app that is accessible at http://localhost:8080/ (using Vue CLI), and my backend is operating on Express at http://localhost:7070. I'm curious if there is a way to integrate both the frontend and backend under the same a ...

Guide on converting a JavaScript object (obtained from a JSON web method) into an array, with the JavaScript object containing one property and multiple values, using JQuery

$(document).ready(function() { $.ajax({ async: true, type: "POST", url: "default.aspx/getName", data: '{}', contentType: "application/json;charset=utf-8", dataType: "json", success: ...

Generate an automatic "proxy" for ASP.NET MVC Controller to communicate with AngularJs service

Whenever I utilize an ASP.NET MVC controller with AngularJS, the majority of my controller functions consist of JSON results. When creating my AngularJS service, I find myself repeatedly writing similar code to handle GET or POST calls to my ASP.NET contro ...

Maintaining proportionality using CSS (if achievable)

Having a small issue with image heights here. To see the problem in action, check out this demo. In the demo, you'll notice that the "rocket raccoon" image is taller than the others. .gallery-elements .gallery-image-big { position: relative; } ...

Passing a variable from a child component to a parent component in Angular 2 using EventEmitter and a

I am experiencing a challenge with the Event Emitter in my child component. My goal is to pass a variable with EventEmitter to the parent component, but I would like to include a timeout function. Currently, the code looks like this: CHILD: export class ...

What is the best way to maintain user authentication using Firebase?

After trying a few solutions I found, I am still struggling to persist user authentication with Firebase after a page refresh. It seems like I might be missing some key concepts. I have been following the Firebase documentation and attempted to implement ...

I need help with creating an AJAX JSON call using Angular. Let me share the JavaScript function that I currently have

When a button is clicked, the function below is called. It retrieves data from a JSON file and stores it if a success message is received. Here is a screenshot of the returned data. My JavaScript function is working correctly, but I am new to Angular and l ...

Define the length of the separator used in the list

Seeking guidance on adjusting the length of a list separator using CSS. Currently, I am utilizing the following code: ul li { border-top: #00000 1px solid; } I am interested in setting the length of the separator using padding. For instance, I would like ...

The state change in NextJS button becomes visible after the second click

An avid learner exploring Next.js. I am eager to create a component that displays the window width and height along with a Tailwind CSS breakpoint when a button is clicked, as a first step towards continuous display. I chose to implement a button click ev ...

Attempting to establish a login system using MongoDB

I am currently working on a function to verify user login details entered in a form and compare them with data stored in MongoDB, such as email and password. However, the function seems to be malfunctioning. The expected behavior is that when a user ente ...

Receiving Output from an AJAX Request

My PHP script is set up to verify the validity of an email address, returning either true or false. I've been attempting to use AJAX to call this PHP file and pass the result back to a Javascript function, but unfortunately, I haven't been succes ...

The ng-view DIV in Angular JS 1.x mysteriously vanishes

Currently, I am working on a project that involves angularJS and ASP.NET in Visual Studio 2013. However, I have encountered a frustrating issue where my DIV node for ng-view is being replaced with an ng-view comment without any errors appearing while testi ...

What steps can I take to ensure my site retains its appearance when minimized?

When I maximize my website, it looks great, but when I restore it down, the box on my site becomes distorted. I'm new to designing websites and struggling with this issue. Here's the code I've been using: .boxed { position: absolute ...

What is the behavior of an AngularJS controller when it encounters the res.json(false) value?

In my AngularJS controller, I am sending an HTTP request to an API. The API can respond with either res.json(true) or res.json(false) depending on a certain condition. However, it seems like the controller is not handling this as expected. I am interested ...

How can jQuery be employed to locate the position of an element within its group of siblings with a particular CSS class?

Here is an example of HTML code: <div class="component"> <div class="component"> <div class="component"> </div> </div> <div class="component"> <div class="somethingelse"> ...

Transferring class titles between div elements

I would like to implement a feature where class names on div elements shift after a brief delay, perhaps 10 seconds. My goal is for the 3 classes listed below to cycle through the div elements and start over once it reaches the last one. For instance: & ...