显示加载器图像，直到完全加载背景图像

我想实现一个加载器的背景图像，直到整个图像完全加载使用jQuery。我已经尝试了各种方法来做到这一点。由于图像是在CSS中指定的，我无法指定确切的图像ID或类。最后，我最终这样做，显示加载器图像，直到完全加载背景图像

$(window).load(function() { 
    $(".loader").fadeOut("slow"); 
})

但是这样做是在窗口加载时发生。我想发生它，直到图像完全加载。和背景图像来在以下部分

<div class="loader"></div> 
    <div class="test_banner services_banner"> 
</div>

这将是巨大的，如果有人伸出援助之手来管理这种情况。提前致谢。

来源

2016-09-29 Muneer Muhammed

考虑使用任何'lazyload'插件。没有必要重新发明轮子。 – Aziz

请使用标记和CSS发布完整示例（例如jsfiddle）。无法真正想象它是什么样子以及它应该是什么样子。 – Connum

从CSS获取背景图像，使用相同的文件名创建一个新的图像，并且当它被加载时，删除加载器等。 – adeneo

也许你可以使用多个背景图像

例如：

div { 
 
    height:90vh; 
 
    width:90vw; 
 
    background:url(http://lorempixel.com/1200/800/nature/) center, 
 
    url(http://www.jqueryscript.net/demo/Simple-Customizable-jQuery-Loader-Plugin-Center-Loader/img/loader1.gif) center center no-repeat ;/* this works once/untill image has been loaded */

<div></div>

的GIF背景仍然在这里，但被涂成behi，D是大图像。只要没有加载大图像就可以看到它......

来源

2016-09-29 14:27:40

注意到我抓住一个jquery插件的加载器gif线.... –

感谢您的帮助。我已经尝试了你的建议。但是，在此之后，它会逐步显示图像加载。我想要的只是在完成加载后显示主图像。就像用图像替换装载机一样。 –

显示加载器图像，直到完全加载背景图像

回答

相关问题