When loading the following code, my priority is for "div1" to load before anything else.
<HTML>
<body>
<div id="div1">This div should be loaded first</div>
<img src="/" title="Other large images">
<img src="/" title="Other large images">
<img src="/" title="Other large images">
<img src="/" title="Other large images">
<img src="/" title="Other large images">
</body>
</html>
When using HTML, it is not possible to dictate the loading order of elements on a web page.
The default loading sequence is from the Top to Down, starting with the <HEAD> section and its contents, followed by the <BODY> section and its contents.
To customize the loading process according to your preferences, JavaScript can be utilized.
For instance, the following code snippet demonstrates this concept.
window.onload = function(){
const div1 = `<div id="div1">This div will load first please</div>`;
setTimeout(() => {
console.log("DIV1 load after 3 second");
document.getElementById("the-div-1").innerHTML = div1;
}, 3000);
const imgs = `
<img src="https://picsum.photos/id/237/200/300.jpg" title="Other large images">
<br />
<img src="https://picsum.photos/id/238/200/300.jpg" title="Other large images">
<br />
<img src="https://picsum.photos/id/237/200/300.jpg" title="Other large images">
<br />
<img src="https://picsum.photos/id/240/200/300.jpg" title="Other large images">
<br />
<img src="https://picsum.photos/id/241/200/300.jpg" title="Other large images">
<br />
`;
setTimeout(() => {
console.log("Images load after 6 second");
document.getElementById("image-div").innerHTML = imgs;
}, 6000);
}<html>
<body>
<div>
<span>Anything in HTML file will load from top-down apporach.</span>
</div>
<div id="the-div-1"></div>
<div id="image-div"></div>
</body>
</html>Try using the document.onload function.
Explore the documentation here
<div id="a"><!--additional content--></div>
<div onload="loadOtherContent()">IMPORTANT DIV</div>
<div id="b"><!--additional content--></div>
<script>
const loadOtherContent = () => {
//loading additional content
document.getElementById("a").innerHTML = "...";
document.getElementById("b").innerHTML = "...";
//...
}
</script>
I am currently working with the Quasar framework and I am trying to add a store module. Despite running the quasar new store <name> command, I keep receiving the message "No vuex store detected" in the browser console. Any idea where the issue migh ...
I am utilizing Bootstrap to create two buttons on my webpage that will stack vertically instead of horizontally when the screen width decreases. I attempted to achieve this using the following code: index.php: <div class="container-fluid"> ...
I have created a div container and I would like to implement a horizontal scroll bar when there are more than four items (each item consists of a picture with a title). Desired outcome: https://i.sstatic.net/wWucQ.png The issue I am facing is that by usi ...
I am facing an issue with sending user data collected from the front end via an ajax call to an axios post request in the back end. The parameters I need to pass include arrays of data, but when I check the req.body in the backend using console.log(), I no ...
I'm encountering issues with the alignment of titles and text using the 'Lato' Google font. It seems like there is a space or kerning issue on the first letter causing them not to align properly to the left. Any suggestions on how to fix thi ...
The topic at hand revolves around another issue: The challenge of creating an Ajax website with links from multiple subfolders. Take a look at the discussion where a solution for that problem was discovered. However, my current dilemma with that solution ...
When trying to position the navbar inside a div with the class main using negative margins, it causes issues on small screens when clicking on the toggler icon. How can I address this problem without relying on negative margins? <link rel="stylesheet" ...
Is there a specific NPM command I can run from the CLI to count only the installed NPM Modules in my package that are not Dev Dependencies? When I use npm ls, it lists all packages without distinguishing between regular dependencies and DevDependencies. ...
There are two arrays in JavaScript named designs and articles. var designs = [ { design_id:"bwbmbqlujurv", article_id:14782, name:"adidas demogorgon black" }, { design_id:"lg9yba2gkcwr", article_id:14782, name:"harry potter w ...
Before, I would use jQuery to load external website content such as html or json. Sometimes, I even utilized a proxy PHP page in order to bypass strict origin policies on certain sites. However, I've encountered an issue with some websites. In the HT ...
My JSON array is structured like this: [ { "characterID": 0, "description": "Series 1", "id": 1, "seriesID": 0, "status": "ACCEPTED", "type": "SE ...
Difficulty with Firebase Integration on Heroku Currently, I am facing an issue with my Node.js server deployed on Heroku that interacts with Firebase. When attempting to run the application on Heroku, I encounter an error stating that it is unable to load ...
I have defined IndexedDB and IDBTransaction dbVersion = 1; var db; var dbreq; var customerData = { ssn: "444", name: "Bill", age: 35, email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2b0bbbebe92b1bdbfa2b3bcabfcb1bdbf"& ...
Update: Finally, I discovered the root of the problem within my stylesheet. Despite both sliders being loaded, they were overlapping due to their positioning, causing the second slider (or any additional ones) to remain hidden. I've been striving to ...
Is it possible to display the uploaded image within a red box? Here is the code snippet: http://codepen.io/anon/pen/ZWXmpd <div class="upload-image"> <div class="upload-image-preview"></div> <input type="file" name="file" val ...
<?php include 'database.php'; $sql="SELECT `j_company`,`j_salary`,`j_title` FROM `jobs`"; $query=mysqli_query($conn, $sql); if(!$query) { echo "<h1>Unsuccessful</h1>"; echo("Error description: " . ...
I'm encountering a persistent error on my production server that indicates a missing angular.json file, even though the file is present in the root of my project! Every time I run npm start, npm build, or npm test, I receive the same error message. ...
I have been struggling for the past three days to get my nested Datatables working properly. I have a parent table called MAINtable and a child table called adjlinesTable. The issue I am facing is that all lines from the adjlinesTable are being drawn to ...
Hello, I am currently working on retrieving videos from a database, but I have encountered an issue with the video saving option. When a user right-clicks on the video, they are able to save it in their system's storage. What I would like to achieve ...
While attempting to enclose my element within a <div> that is nested inside the <Grid>, I realized that this was causing the <Grid> layout to break! Surprisingly, when I tried the same approach with Bootstrap grid system, this issue did n ...