有没有办法在下载其他图像之前强制下载特定图像(优先图像)?
我使用了很多背景图片。我的目标网页有一个渐变填充,用作我的目标网页的第二张图片。
着陆页CSS:
.bg-img1::before {
background-image: url(https://mywebsite/images/myimage.jpg), linear-gradient(to top, #206020, white);
background-size: cover, cover;
}
我从使用DOM就绪检测切换为我的背景图像渐变在我的目标网页图像下载前显示3或4秒...
$(function() {
// DOM ready, but image hasn't downloaded yet.
});
现在我使用window.onload,一切正常,但我正在添加越来越多的图像,下载延迟变得越来越大。
window.onload = function() {
// delay, delay... finally my landing page with gradient displays
});
重申我的问题,我希望能够优先下载我的目标网页。如果我切换回使用DOM准备好,有没有办法确保在显示渐变之前显示我的背景图像?
答案 0 :(得分:2)
添加图片标记并将源文件放入其中。确保在此标记中添加display none。将此标记放在身体标记的最高位置。这应该优先考虑您的图像加载。希望这对你有用。
答案 1 :(得分:0)
也许我为你做的剧本按你的预期工作。通过使用JS,不可能设置CSS伪元素,如:before
。
我做的是改变代码,以便在图像容器中提供img URL作为data
属性。
然后使用JavaScript我隐藏所有图像容器并开始动态创建新图像,然后我将src属性设置为data-img
元素的section
的值。
最后,我会收听load
和error
事件,然后再次显示容器。通过这种方式,您可以确定它已经在浏览器中加载了图像,因此当显示图像容器时,图像已经就位。
(
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 );
&#13;
.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.com/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.com/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.com/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.com/wp-content/uploads/2017/03/1-276.jpg), linear-gradient(to top, #206020, #fff);
background-size: cover, cover;
background-position: 50% 50%;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="sec_1" class="img_container" data-img="http://www.lifeofpix.com/wp-content/uploads/2017/03/dscf0786.jpg"></section>
<section id="sec_2" class="img_container" data-img="http://www.lifeofpix.com/wp-content/uploads/2017/03/dscf0357.jpg"></section>
<section id="sec_3" class="img_container" data-img="http://www.lifeofpix.com/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.com/wp-content/uploads/2017/03/1-276.jpg"></section>
&#13;