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