Question

我正在每10 seconds重新加载div而不重新加载整个页面。并且当刷新发生时，它会使我的div变灰并显示刷新图像，刷新完成后，它会将数据加载到我的div表中，并且工作正常。

以下是我正在使用的刷新图片 -

enter image description here

问题陈述： -

下面是我的JSP文件(dataInfo.jsp)，我每10秒重新加载div container而不重新加载整页。

<body>
    <div id='headerDivDash'>
        <h1 id='topHeaderDash'>
          <!-- some image here -->
        </h1>
    </div>
    <div id="vertical-list" style='display: block; list-style-type: none;'>
        <ul class="resp-tabs-list">
            <a href="_blank"><li>Test 1</li></a>
            <br />
            <a href="_blank"><li>Test 2</li></a>
        </ul>
    </div>

    <!-- just need to reload this div, other div should be intact without getting appended -->
    <div class="container">

    </div>
    <div class="footer">Some Value Here</div>
</body>

现在下面是我用来每10秒加载div container的jquery脚本，它运行正常。我能够看到刷新图像，它也会变灰，所以到目前为止一切正常。

// Create a refresh function:
function refresh(){
    // SHOW overlay
    $('#overlay').show();
    // Retrieve data:
    $.ajax({
        url: 'dataInfo.jsp',
        type: 'GET',
        success: function(data){
            // onSuccess take only the container content
            var content =  $($.parseHTML(data)).filter(".container"); 
            //Replace content inside the div
            $('.container').replaceWith(content);
            // HIDE the overlay:
            $('#overlay').hide();
        }
    });
}

$(document).ready(function(){
    // Create overlay and append to body:
    $('<div id="overlay"/>').css({
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: $(window).height() + 'px',
        opacity:0.4, 
        background: 'lightgray url(http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif) no-repeat center'
    }).hide().appendTo('body');

    // Execute refresh with interval:
    setInterval(refresh, 1 * 1000);
});

现在如上所述，我已经硬编码了图片的网址。如果我在生产中部署我的代码，那么它会因为防火墙而阻止这个URL，所以不知何故我需要从项目中的本地文件夹加载这个图像。

我的目录结构是这样的 -

webapp/
|-- resources/
|   +-- img/
|           page-loader.gif
+- WEB-INF/
  +-- views/
        dataInfo.jsp

我尝试使用这样的路径background: 'lightgray url("/testweb/src/main/webapp/resources/img/page-loader.gif") no-repeat center'它也不会以某种方式工作。

所以我的问题是 - 有什么方法可以在html的主体中以某种方式重写我上面的jquery中的overlay div吗？然后我可以使用图像标签，这对我来说肯定会有用。

<img src="page-loader.gif" />

Answer 1

据我所知，图像应放在屏幕的中央。这可以通过使用外部div作为背景并将图像置于其中心来完成。

将div和img标记添加到body代码的末尾，以便：

    <div class="footer">Some Value Here</div>
    <div id="overlay" style="display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: lightgray; opacity: 0.4; ">
        <img src="page-loader.gif" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;" />
    </div>
</body>

style属性可以移动到单独的css文件中，并替换为class属性。

可以减少$(document).ready代码：

$(document).ready(function(){
    // Execute refresh with interval:
    setInterval(refresh, 1 * 1000);
});

Answer 2

您确定目录结构吗？我假设你正在使用Java / JSP spring？而不是Javascript！

我相信资源文件夹是Web应用程序文件夹中的一个，Web应用程序是您的根目录。你试过url(/img/page-loader.gif)吗？

如何在html的主体中使用图像标签而不是从css加载图像？

2 个答案: