Question

有没有办法在下载其他图像之前强制下载特定图像（优先图像）？

我使用了很多背景图片。我的目标网页有一个渐变填充，用作我的目标网页的第二张图片。

着陆页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准备好，有没有办法确保在显示渐变之前显示我的背景图像？

Answer 1

添加图片标记并将源文件放入其中。确保在此标记中添加display none。将此标记放在身体标记的最高位置。这应该优先考虑您的图像加载。希望这对你有用。

Answer 2

也许我为你做的剧本按你的预期工作。通过使用JS，不可能设置CSS伪元素，如:before。

我做的是改变代码，以便在图像容器中提供img URL作为data属性。

然后使用JavaScript我隐藏所有图像容器并开始动态创建新图像，然后我将src属性设置为data-img元素的section的值。

最后，我会收听load和error事件，然后再次显示容器。通过这种方式，您可以确定它已经在浏览器中加载了图像，因此当显示图像容器时，图像已经就位。

＆＃13;

(
  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;

强制在其他背景图像之前加载背景图像

2 个答案: