admin管理员组文章数量:1418112
Is there a way to force downloading a specific image (priority image) before other images are downloaded?
I use many background images. My landing page has a gradient fill used as my second image of my 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 from using DOM ready detection as my background image gradient was displaying 3 or 4 seconds before my landing page image was downloaded...
$(function() {
// DOM ready, but image hasn't downloaded yet.
});
Now I use window.onload and everything is working fine, but I am adding more and more images and the downloading delay is being substantial.
window.onload = function() {
// delay, delay... finally my landing page with gradient displays
});
To reiterate my question, I would like to be able to make downloading my landing page a priority. Is there a way to ensure that my background image displays before my gradient is displayed if I switch back to using DOM ready?
Is there a way to force downloading a specific image (priority image) before other images are downloaded?
I use many background images. My landing page has a gradient fill used as my second image of my 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 from using DOM ready detection as my background image gradient was displaying 3 or 4 seconds before my landing page image was downloaded...
$(function() {
// DOM ready, but image hasn't downloaded yet.
});
Now I use window.onload and everything is working fine, but I am adding more and more images and the downloading delay is being substantial.
window.onload = function() {
// delay, delay... finally my landing page with gradient displays
});
To reiterate my question, I would like to be able to make downloading my landing page a priority. Is there a way to ensure that my background image displays before my gradient is displayed if I switch back to using DOM ready?
Share Improve this question asked Apr 7, 2017 at 7:16 EggsEggs 3454 silver badges16 bronze badges2 Answers
Reset to default 4add an image tag and place the source in it. make sure that you add display none to this tag. place this tag as high up in your body tag. this should prioritize your image loading. hope this works for you.
Maybe the script I did for you works as you expect. By using JS there's no possibility to set the CSS pseudo elements such the :before.
What I did, was to change the code so it provides the img URL as data attribute in the image containers.
Then using the JavaScript I hide all the image containers and start creating new images dynamically, and then I set the src attribute, to the value of the data-img of the section element.
Finally, I listen for the load and error event, and then I show again the container. This way you can be sure, that the image it is already loaded in the browser, and thus when the image container it is displayed will have the image already in place.
(
function ( $, window, undefined ) {
var img_container = null;
var img_loaded = 0;
var hide_img_containers = function hide_img_containers() {
if ( 0 < img_container.length ) {
img_container.hide();
}
}
var show_img_containers = function show_img_containers( $element ) {
$element.show();
}
var load_images = function () {
img_container.each(
function() {
var $section = $( this );
var $img = $section.attr( 'data-img' );
var img = document.createElement('img');
img.src = $img;
img.addEventListener(
'load',
function () {
show_img_containers ( $section );
}
);
img.addEventListener(
'error',
function () {
show_img_containers ( $section );
}
);
}
);
}
$( document ).ready(
function ( $ ) {
img_container = $( '.img_container' );
hide_img_containers ();
load_images();
}
);
}
)( jQuery, this );.img_container {
min-height: 250px;
position: relative;
}
.img_container:before {
content: '';
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
}
#sec_1:before {
background-image: url(http://www.lifeofpix./wp-content/uploads/2017/03/dscf0786.jpg), linear-gradient(to top, #206020, #fff);
background-size: cover, cover;
}
#sec_2:before {
background-image: url(http://www.lifeofpix./wp-content/uploads/2017/03/dscf0357.jpg), linear-gradient(to top, #206020, #fff);
background-size: cover, cover;
}
#sec_3:before {
background-image: url(http://www.lifeofpix./wp-content/uploads/2016/05/Life-of-Pix-free-stock-street-lights-wall-PaulJarvis.jpg), linear-gradient(to top, #206020, #fff);
background-size: cover, cover;
}
#sec_4:before {
background-image: url(http://www.lifeofpix./wp-content/uploads/2017/03/1-276.jpg), linear-gradient(to top, #206020, #fff);
background-size: cover, cover;
background-position: 50% 50%;
}<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="sec_1" class="img_container" data-img="http://www.lifeofpix./wp-content/uploads/2017/03/dscf0786.jpg"></section>
<section id="sec_2" class="img_container" data-img="http://www.lifeofpix./wp-content/uploads/2017/03/dscf0357.jpg"></section>
<section id="sec_3" class="img_container" data-img="http://www.lifeofpix./wp-content/uploads/2016/05/Life-of-Pix-free-stock-street-lights-wall-PaulJarvis.jpg"></section>
<section id="sec_4" class="img_container" data-img="http://www.lifeofpix./wp-content/uploads/2017/03/1-276.jpg"></section>本文标签： javascriptForce a background image to be loaded before other background imagesStack Overflow
版权声明：本文标题：javascript - Force a background image to be loaded before other background images - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745279032a2651334.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论