javascript - Force a background image to be loaded before other background images -


is there way force downloading specific image (priority image) before other images downloaded?

i use many background images. landing page has gradient fill used second image of landing page.

landing page css:

.bg-img1::before {   background-image: url(https://mywebsite/images/myimage.jpg), linear-gradient(to top, #206020, white);   background-size: cover, cover; }

i switched using dom ready detection background image gradient displaying 3 or 4 seconds before landing page image downloaded...

$(function() {     // dom ready, image hasn't downloaded yet. });

now use window.onload , working fine, adding more , more images , downloading delay becoming substantial.

window.onload = function() {   // delay, delay... landing page gradient displays });

to reiterate question, able make downloading landing page priority. there way ensure background image displays before gradient displayed if switch using dom ready?

add image tag , place source in it. make sure add display none tag. place tag high in body tag. should prioritize image loading. hope works you.


Comments

Post a Comment

Popular posts from this blog

javascript - Knockout pushing observable and computed data to an observable array -

i trying push multiple data (firstname , lastname), along when compute firstname , lastname , try push data in same array thrown error. below code. viewmodel: var viewmodel = function () { var self = this; self.gameofthrones = ko.observablearray ([ {firstname: 'jon', lastname: 'snow'}, {firstname: 'robb', lastname: 'stark'} ]); self.firstname = ko.observable(''); self.lastname = ko.observable(''); (var i=0; i<self.gameofthrones().length; i++) { self.gameofthrones()[i].fullname = ko.computed (function () { return self.gameofthrones()[i].firstname+" "+self.gameofthrones()[i].lastname; }) }; $('#classic').click( function() { self.gameofthrones.push( {firstname: $('#fn').val(), lastname: $('#pr').val()} ); }); } ko.applybindings(new viewmodel()); html view: <form class="" action="index.html" method="post"...
Read more

'hasOwnProperty' in javascript -

i use obj.hasownproperty judge whether object has property, when replaced obj[prop] !== undefined , not normal implementation, ask, why behind method can not use it? object.hasownproperty(prop); object[prop] !== undefined; obj[prop] !== undefined wrong 2 reasons: you can explicitly set property undefined , obj[prop] = undefined; . obj.hasownproperty(prop) return true in case. obj[prop] follow prototype chain, return property that's inherited. obj.hasownproperty(prop) returns true if property exists directly in object, returns false inherited properties.
Read more

Trouble making a JSON string -

i'm trying upgrade existing json structure more complex one. the original idea bunch of x animals , each 1 having bunch of caracteristics: animals animal 1 claws:4 eyes:2 animal 2 claws:0 eyes:6 etc. the json this: { "animals":[ {"claws":"4", "eyes":"2"}, {"claws":"0", "eyes":"6"}, etc. ] } so can see, don't name each animal object, caracteristics of animal element of array. can use them in loop animals[x].claws now want add nest each animal, like: animals animal 1 head eyes:2 ears:2 body claws:4 tails:1 legs:4 animal 2 head eyes:6 ears:0 body claws:0 tails:0 legs:8 but didn't manage without naming each animal object (with same name "animal") , using arrays what's in animal: { "animals":[ {"animal":[ {"head": ...
Read more