Question

我正在使用此处的Ajax Loading图片：Show loading progress when making JSF Ajax request显示ajax处于开始，完成，成功状态之间的图像加载。

我想知道如何使图像显示在所有内容的上方和屏幕的中心，就像几乎所有网站上的任何加载图片一样。

<div id="ajaxloader" style="display: none;">
<h:graphicImage value="/resources/img/gload.gif"></h:graphicImage>
</div>

Ajax脚本

<script>
    jsf.ajax.addOnEvent(function(data) {
        var ajaxstatus = data.status; // Can be "begin", "complete" and "success"
        var ajaxloader = document.getElementById("ajaxloader");

        switch (ajaxstatus) {
            case "begin": // This is called right before ajax request is been sent.
                ajaxloader.style.display = 'block';
                break;

            case "complete": // This is called right after ajax response is received.
                ajaxloader.style.display = 'none';
                break;

            case "success": // This is called when ajax response is successfully processed.
                // NOOP.
                break;
        }
    });
</script>

Answer 1

尝试使用position:fixed和transform: translate的组合。我不知道h:graphicImage是什么，因此下面的示例使用标准img标记，但重要的一点是ajaxloader div上的内联样式：

var ajaxloader = document.getElementById("ajaxloader");
var i = 0;

function toggleLoader() {
  var displayStyle;
  if (++i % 2) {
    displayStyle = 'block';
  } else {
    displayStyle = 'none';
  }
  ajaxloader.style.display = displayStyle;
}

document.getElementById("showLoader").addEventListener('click', toggleLoader);

<div id="ajaxloader" style="display: none;position: fixed; top: 50%; left: 50%;transform:translate(-50%, -50%); z-index: 1;">
<img src="https://placeholdit.imgix.net/~text?txtsize=14&txt=Loading...&w=100&h=100"/>
</div>
<button id="showLoader">Toggle load graphic</button>

Ajax将图片位置加载到内容之上

1 个答案: