Question

大家好，这个Queryloader正在我的页面上工作，但我现在想要的是将图像放在加载器中（例如公司徽标）。请帮忙

<script src="loader/queryloader2.min.js" type="text/javascript"></script>

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
    new QueryLoader2(document.querySelector("body"), {
        barColor: "#e7c665",
        backgroundColor: "#111",
        percentage: true,
        barHeight: 1,
        minimumTime: 300,
        fadeOutTime: 1000
    });
});
</script>

http://www.gayadesign.com/diy/queryloader2-preload-your-images-with-ease/

Answer 1

插件加载预加载HTML中的所有图像。没有规定只加载一部分图像。至少没有文件记录。

 It automatically fetches all your images and background images and preloads them before showing the webpage

来自QueryLoader2 site

的

-

Answer 2

您需要做的就是添加一些CSS代码......

如果您想添加自定义文字：

#qLoverlay::after { position:absolute; content:'your custom text here'; left:0; right:0; bottom:40%; font-size:14px; color:#FFF; }

如果您想添加图片：

#qLoverlay::before { position:absolute; content:url(exampleimage.png); left:0; right:0; top:30%; }

Answer 3

您可以使用以下CSS规则：

#qLoverlay {
    background: url(images/logo.png) no-repeat center 25%;
}

Answer 4

以这种方式修改css：

#qLoverlay{
position: relative;
}

仅更改顶部以调整图像。

#qLoverlay::before {
position:absolute;
content:url('images/logoedit1.png');
text-align: center;
top: 25%;
width: 100%;
}

Answer 5

我添加了以下内容，用于创建加载文本，条形图和百分比

// CODE TO INSERT
            this.loaderLogo = $("<div id='loader-logo'></div>").css({
                    background: 'url("http://chrisrocco.net/elegantearth/res/images/logo.png") no-repeat',
                    backgroundSize: '100%',
                    height: "400px",
                    width: "900px",
                    margin: "25px auto",
                    fontSize: "60px",
                    textAlign: "center",
                    color: this.parent.options.barColor
            }).appendTo(this.container);

它属于这里，在queryloader2.js的第31行

    if (this.parent.options.percentage == true) {
            this.percentageContainer = $("<span id='qLpercentage'></span>").text("0%").css({
                    height: "80px",
                    width: "115px",
                    position: "absolute",
                    fontSize: "60px",
                    fontFamily: this.parent.options.fontFamily,
                    top: "75%",
                    left: "50%",
                    marginTop: "-" + (59 + this.parent.options.barHeight) + "px",
                    textAlign: "center",
                    marginLeft: "12px",
                    marginTop: "-120px",
                    color: this.parent.options.barColor
            }).appendTo(this.container);

            this.nameElem = $("<span id='elem-title'></span>").text("Loading ").css({
                    height: "80px",
                    width: "258px",
                    position: "absolute",
                    fontSize: "60px",
                    fontFamily: this.parent.options.fontFamily,
                    top: "75%",
                    left: "50%",
                    marginTop: "-" + (59 + this.parent.options.barHeight) + "px",
                    textAlign: "center",
                    marginLeft: "-270px",
                    marginTop: "-120px",
                    color: this.parent.options.barColor
            }).appendTo(this.container);

            // LINE 31
            // INSERT HERE
    }

当然，您必须将css调整到您的项目

Picture of Result

如何通过gayadesign将图像放入QueryLoader中

5 个答案: