Which method of loading website images is quicker: sequential or parallel, utilizing Javascript?

As I work on developing an AJAX image gallery that preloads multiple large images ranging from 120kB to 2MB before the lightbox appears, a question arises: should these images be loaded sequentially (waiting for one to preload at a time) or in parallel? While my initial assumption is that loading them in parallel, utilizing multiple http connections, would be faster than a single connection, I recall reading about performance issues with older versions of IE when it comes to parallel image loading. Is this still a concern?

The entire project is being coded in XHTML5 (HTML5 XML), targeting only the latest stable releases of popular browsers such as Safari 5+, Chrome 15+, Firefox 8+, and IE9+. The AJAX functionality is implemented using jQuery.

I understand there are underlying network factors that can affect data loading significantly, such as latency, bandwidth, connection quality (packet loss, concurrent connections allowed by ISP, proxies, servers, etc.). For the sake of discussion, let's assume the average user has a decent internet connection (dsl, cable, fiber) with latency below 80 ms and bandwidth over 6 Mbps.

javascriptajaxperformanceimagepreloading

Answer №1

It appears that parallel loading outperforms sequential loading on the majority of internet connections.

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

Loading static assets dynamically in React Native WebView

Is there a way to dynamically load files in a WebView from the local file system or assets folder? I've been able to fetch resources from a server using ajax, but struggling to figure out how to load local resources. DETAILS: I am currently loading a ...

ajaxreact-nativewebviewthree.js

Angular ngView not displaying content on the page

To load a ngView page by clicking on a link, the html file does not appear as expected. Running the application directly without using localhost might be causing the issue. I simply opened index.html with Chrome browser, so it's possible that there i ...

javascriptangularjslocalhostngrouteng-view

Using AngularJS to automatically include predefined data in an $http request

I am looking for a way to include a default data attribute in an http request. I came up with the following code: var app = angular.module('dumbhttp', []); app.service('dumbhttp', function ($http, $location) { this.post = function ...

javascriptangularjshttppostdefault

The Ajax request functions correctly in Chrome and Safari but encounters issues in Firefox and Internet Explorer

I've encountered an issue with jQuery where the call is failing when making a request with base64 authorization header in the beforeSend function. It's a simple request to retrieve projects. function GetProjects(full){ var query = "/Projects"; $ ...

javascriptajaxinternet-explorerfirefoxcompatibility

Updating multiple rows in Laravel using input data

Check out the app here I recently created a multi-row update feature with JavaScript. The button function successfully retrieves the ID of each row, but now I'm facing a challenge. I want to include an input form for the data that is being updated. ...

phpajaxlaravel

I keep encountering the issue where I receive the message "Unable to access property 'innerText' of an undefined element" when running the Array forEach function. This problem seems to be happening within the HTMLInputElement section of the code

I am facing an issue where the error occurs because "cardTxt" is not recognized as a string. I verified this using typeof syntax, but I'm unable to understand why it can't be a string. This code snippet includes the use of bootstrap for styling. ...

javascriptarraysjsontypeerror

Dynamically insert innerHTML content into table rows using JavaScript in PHP is a fantastic way to customize

Having trouble with innerHTML in this scenario, looking to achieve something along these lines: <table width="100%" border="0" id="table2"> <?php include("connection.php"); $sql=mysql_query("select* from b1"); while($res=mys ...

javascriptphphtmldominnerhtml

Sneaky spam and ads embedded within Joomla template

Today, while examining the source code of a Joomla site I am developing, I stumbled upon some hidden links that seem to be spam. I have spent an hour searching through various template files but have been unable to locate them. The hidden links in questio ...

phpjavascripthtmlcssjoomla

Steps to extract date selection from a datepicker using jQuery

I recently implemented this code snippet to utilize datepicker for displaying dates: $(document).ready(function(){ $("#txtFrom").datepicker({ numberOfMonths: 1, onSelect: function (selected) { var dt = new Date(selected); ...

javascriptjquery

Switch up the text when the image link is being hovered over

Is there a way to change the text color of the "a" tag when it is not wrapping the img link? <li> <a href="# WHEN I HOVER THIS IMG LINK I WANT A TAG BELOW TO CHANGE COLOR"> <img alt="Franchise 16" src="#"></img> < ...

javascriptjquerycss

What is the best way to process an API call entirely on the server without revealing it to the client?

Seeking guidance on a technical issue I've encountered. On my website, x.com, a form submission triggers an API call to y.com, yielding a JS hash in return. The problem arises when Adblocker Plus intercepts the content from y.com, causing it to be bl ...

javascriptjqueryruby-on-railsruby

Tips for identifying MIME type errors in an Angular 9 application and receiving alerts

While working on my Angular app, I encountered the MIME type error Failed to load module script: The server responded with a non-javascript mime type of text/html. Fortunately, I was able to resolve it. Now, I'm stuck trying to figure out how to rece ...

javascriptreactjsangularecmascript-6

Find the total of values in an array that may be null or undefined

In this scenario, I have an array that looks like this: myData = [[2, null, null, 12, 2], [0, 0, 10, 1, null], undefined]; The goal is to calculate the sum of each sub-array, resulting in an array like this: result = [16, 11, 0]. The ...

javascriptarraysangularjsreduce

Display a compilation either in the backend or the frontend

I'm fairly new to NodeJS and I could really use some advice. I currently have a webpage that displays a list of users, which is retrieved from a collection using Mongoose. I am aware of two different ways to display this list: 1) One option is to que ...

javascriptangularjsnode.jsasynchronous

Is there an alternative to the jQuery :contains selector?

How can I choose an option from a drop-down menu based on its text value? When I execute the following code: var desiredText = "Large"; $("#size option:contains(" + desiredText + ")").attr('selected', 'selected'); it ends up selecting ...

javascriptjquerydrop-down-menu

Guide on Sending a POST Request via HTTPS in Websites

I am developing a browser extension for Chrome that requires sending a post request to a server using standard HTTP. However, this is causing a mixed content error when I'm on a website that uses HTTPS, and the browser refuses to process my request. ...

javascriptajaxgoogle-chrome-extensionhttpsxmlhttprequest

Accessing CSV data stored externally using JavaScript

Hi there, I am struggling to load external CSV data into a script due to what I believe is the browser's same origin policy restriction. I came across some information about using cross-document messaging as a workaround, but I have no idea how to go ...

javascripthtmld3.js

When implementing Ajax with a Spring controller, it will redirect the user to a different location

I am currently working on developing a Spring MVC application similar to a "Cinema" app. I have implemented a RestController with a Get method that produces JSON responses. private SessionService sessionService; public SessionController(SessionService ses ...

javajqueryajaxspring-mvc

How to determine the length of a JavaScript object

Would like help determining the length of the report_data(object) key using the provided code, but it seems to result in a value of 3. a={report_freq: "daily", report_item_num: 2, report_num: 39, report_data: "{}"} Object {report_freq: "daily", report_ite ...

javascript

Displaying HTML Tags in jQuery JSON Response

Whenever I execute the following code: <html> <head> </head> <body> <?php $value = isset($_GET['send_request']) ? $_GET['send_request'] : false ; if ($value) { echo $value; return ...

phpjqueryajax