如何在html主体中使用图片标签，而不是从CSS加载图片？
秋冬
我正在重新加载div，10 seconds而不重新加载整个页面。并且当刷新发生时，它会使我的div变灰并显示刷新图像，刷新完成后，它将数据加载到我的div表中，并且工作正常。
以下是我正在使用的刷新图像-
。
问题陈述：-
以下是我的JSP文件(dataInfo.jsp)，我container每10秒重新加载一次div，而不重新加载整个页面。
<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>
现在下面是我用来div container每10秒加载一次的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。如果我将代码部署在生产环境中，则由于防火墙的原因，它将阻止此url，因此我需要从项目的本地文件夹中加载此映像。
我的目录结构是这样的-
webapp /
|-资源/
| +-img /
| page-loader.gif
+-WEB-INF /
+-意见/
dataInfo.jsp
我尝试使用这样的路径，background: 'lightgray url("/testweb/src/main/webapp/resources/img/page-loader.gif") no-repeat center'它也无法以某种方式工作。
所以我的问题是-有什么办法可以overlay div以某种方式在我上面的jquery中重写html的内容？然后，我可以使用图片标签，该标签肯定会对我有用。
<img src="page-loader.gif" />
涡狼
据我所知，图像应放置在屏幕中央。这可以通过使用外部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);
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何在图片地图区域标签中使用ng-repeat？
- 2
如何在图片地图区域标签中使用ng-repeat？
- 3
如何使用HTML CSS将图片居中
- 4
webpack直接在html标签中使用图片
- 5
图片未使用CSS加载
- 6
延迟加载HTML5图片标签
- 7
如何在包含图片的Javascript数组内插入HTML标签？
- 8
在HTML中使用SVG图片？
- 9
在HTML / CSS中使用按钮设置背景图片
- 10
如何同时使用html5图片标签和Bootstrap
- 11
如何在CSS内的图片元素上使用CSS填充？
- 12
如何在Swift中使用AVCaptureSession捕获图片？
- 13
如何在Android中使用相机保存临时图片？
- 14
如何在已下载的图片中使用decodeSampledBitmapFromResource？
- 15
如何在MFC中使用Picture Control静态显示图片？
- 16
如何在Xamarin.Forms UWP中使用图片？
- 17
如何在JavaScript中使用本地图片？
- 18
如何在React中使用API从数据中删除图片
- 19
如何在JavaScript中使用图片开始声音
- 20
如何在MFC中使用Picture Control静态显示图片？
- 21
如何在Android中使用多方实体上传多张图片
- 22
如何在我的帖子中使用 CreateView 上传图片？
- 23
如何在p标签上放置图片？
- 24
如何在活动中用文字加载图片？
- 25
图片的HTML标签，
- 26
如何在抛物线路径中移动图片，即使用CSS变换弯曲的图片？
- 27
HTML-Javascript : 使用 Switchcase 加载图片
- 28
图片无法加载（HTML）
- 29
HTML图片无法加载？
我来说两句