Can a browser be instructed on the specific order to download images?

My website includes a fullscreen image slider with approximately 20 images, each around 250kb in size. Due to the large file sizes, I have configured the slider not to start until the first 4 images are downloaded. However, when viewed in the latest version of Chrome, all the images seem to be downloading at the same time, resulting in the first 4 images completing loading almost simultaneously with the remaining 20.

Is there a method to instruct the browser to download the images in chronological order? For example, starting with 'one.jpg', waiting for it to finish downloading before moving on to 'two.jpeg', and so on?

htmlcssimagedombrowser

Answer â„–1

In Javascript, you have the option to utilize the onload property of an img element.

var initialImage = new Image();
initialImage.src = 'some url';
initialImage.onload = function(){
 var secondaryImage = new Image();
 secondaryImage.src = 'some url';
 secondaryImage.onload = function(){
   //etc
 }
}

It is important to note that using a recursive function for these calls would be the proper way to implement this concept, but I wanted to emphasize the core idea here.

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

Accessing an HTML file in a web browser through Eclipse

Whenever I try to open my HTML document by right-clicking and selecting "open with web browser", the browser opens but doesn't show any content. The strange thing is, other HTML documents in my different projects work perfectly fine. Any ideas on why ...

javascripthtmleclipse

Python Selenium: Cannot Click on Element - Button Tag Not Located

TL,DR: My Selenium Python script seems to be having trouble "clicking" on the necessary buttons. Context: Hello. I am working on automating the process of logging into a website, navigating through dropdown menus, and downloading a spreadsheet. Despite ...

javascriptpythonhtmlseleniumiframe

What causes the text to wrap around a floated image?

When an HTML element is floated, it is removed from the normal flow of the page, causing other elements to ignore its space. However, have you ever wondered why text wraps around a floated image instead of going underneath it? ...

htmlcss

Using relative URLs in HTML to navigate a specific group of requests via nodejs middleware

Alright, so let me dive into the details of my current dilemma. Essentially, I have a project implemented in node that serves a specific purpose. It's a website utilizing express, jade, and stylus. I have configured the routing for static content in ...

htmlnode.jsexpress

Is it possible to perform a CSS flip animation without delay?

Trying to implement David Walsh's CSS flip effect for an image that should change to another without requiring a mouseover. Is there a way to trigger it automatically, maybe in 3 seconds? I'm new to this so any help would be greatly appreciated! ...

htmlcss

Positioning an Anchor Element on the Right Side of a Bootstrap 4 Grid

Having some trouble with grid positioning. My markup differs from the example below, but for clarity, I'm explaining my issue here. The button on the right side of the screen looks good initially, but when I resize the window, it starts moving around. ...

csstwitter-bootstrapbootstrap-4

Showing the outcome of a PHP function within a div container

While working on my WordPress site, I've implemented user registration and login functionality. However, I'm not a fan of the default 'admin bar' and would rather create a custom navigation bar. I am looking for a way to dynamically loa ...

javascriptphphtmljsonwordpress

The WordPress issue of a background image not displaying properly when using both a linear gradient and an image

Code snippet: style="background-image: linear-gradient(151deg,#6a7a8f 9%,#8692A4 30%,#a9b1be 49%, #ced2d9 66%, #f1f0f1 88%),url(<?php echo $page['image']; ?>);" Within the div, only the linear gradient is visible. When I switch the order ...

htmlcsswordpressless

Is the session automatically ending after being inactive for more than 30 minutes?

I am currently developing a project that requires a login system for multiple users. Each user will log in and save form entries in a file. The project is exclusive to internal users, with a maximum of 10 allowed. Here is the concept: There is a basic fo ...

javascriptphphtmljqueryajax

Maintain Open State of Toggle Drop Down Menu

Having an issue with the toggle down menu or list on my webpage. The problem is that the menu is constantly open (the #text_box) when the page loads. My intention was for it to be closed initially, and then open only when the user clicks on the 'Ope ...

javascriptjqueryhtml

What is the syntax for creating a link tag with interpolation in Angular 2 / Ionic 2?

As I work on developing an app using Ionic 2/Angular 2, I have encountered a challenge that I am struggling to overcome. Let me provide some context: I am retrieving multiple strings from a webservice, and some of these strings contain links. Here is an e ...

javascripthtmlangulartypescriptionic2

Steps for selecting a checkbox via a link or button

Looking to revamp my quote builder by replacing small checkboxes with stylish 'SELECT' buttons that can automatically check the corresponding checkbox. I also want to apply a specific class to the parent div when the checkbox is checked, allowin ...

jqueryhtmlforms

Creating HTML code within an Object-Oriented Programming PHP file involves creating

Seeking guidance on implementing PHP OOP. Currently working on creating PHP/MySQL code using OOP and need assistance with outputting the code. How should this be approached? To simplify, I will display all the code and await feedback on correctness: ind ...

phpmysqlhtmloop

I need to use Cheerio to scrape data from a web page. The data is structured in a specific format. How can I dynamically parse these tables that may have variable structures

Help! I'm struggling to understand arrays, objects, and loops. Why isn't there a simpler way for me to select elements from the DOM and export them as JSON? Here's the format I'm trying to achieve: From table ONE: Created th : Created ...

javascripthtmlarraysloopscheerio

The problem of the background image not appearing persists even after setting the doctype

Why is the background image not showing when declaring the doctype in vscode for this website, even though it appears in quirks mode? The image can still be accessed through the link in inspect element. I have attempted different approaches such as revis ...

htmlcss

Tips for concealing text adjustments during window resizing in an HTML document

I'm currently working with a website code that involves two sidenavs, one on the right and another on the left. When one sidebar opens, the other collapses. However, I've noticed that the text in between readjusts when the sidebars are toggled op ...

javascripthtmlcss

Getting 100% height on floated neighboring divs: Tips and tricks

​<div id='container'> <div class='left'></div> <div class='right'></div> <div class='clear'></div> </div>​​​​​​​​​​​​​​​​â ...

htmlcss

Tips for assigning a standard or custom value using JavaScript

What is the best way to automatically assign a value of 0 to my input field when the user leaves it blank? Should I use an if statement { } else { } ...

javascripthtmlformsinput

Ways to alter the SVG's color upon hovering above the image:

I need help getting the YouTube logo to turn red when I hover over an image with a link. Currently, the color change only occurs when hovering over the logo itself, but I want it to happen when hovering over the entire image. You can see an example of wh ...

htmlcsssvghyperlink

The file path selected in Internet Explorer's open file dialog box is not retained

Currently, my Uploadify setup allows users to upload files by selecting them through the open file dialog. However, I've noticed that Internet Explorer does not store the path once a file is selected and uploaded. This means that every time a user wan ...

javascriptjqueryhtmlinternet-exploreruploadify