Question

我试图找出如何在我的每张图片后面应用加载图片<div>。在a previously answered question here的帮助下，我能够通过CSS＆amp; JS幻灯片显示我的页面。现在我只想让它适用于任何基本图像。我试图用div包装我的图像并以同样的方式应用它，但我不认为我在这里理解整个过程。我的问题可能在于如何用<p>标签包装我的图片和文字，以使它们正确对齐。

我不会尝试发布所有合并的代码段以使我的幻灯片显示工作，而是仅参考相关网站的测试版：http://www.gwassociates.com/beta

我希望能够将加载图标添加到＆＃34; Team＆＃34;上的静态图像中。和＆＃34;联系＆＃34;页面。您可以在＆＃34; Home＆＃34;，＆＃34; Profile＆＃34;上找到工作效果的示例。和＆＃34;按＆＃34;部分。

<div class="loading load-style">将我的旋转加载图标称为div背景图像，我把它扔进＆＃34; Team＆＃34;页面只是为了表明它。图标需要加载到每个缩略图后面，就像在其他页面的幻灯片中一样。

Answer 1

我在这里看到两个问题。

您正在使用纯色图像并为其设置动画。这些天来，这不是理想的方法。而只是发布一个GIF并跳过动画。这将使旧版计算机在您的网站上获得更好的性能。

查看这个免费的gif生成器：http://preloaders.net/

您的图片看起来很好。但它出现在图像背后。在图像上放置一个无显示，你就会明白我的意思。而不是将加载器图像作为背景类放在div中作为另一个div的backgournd显示：none并且在应用spinner类时显示：block。那么你的z-index实际上会工作并将微调器放在图像前面。

粗糙（未经测试）的代码：

<div class="image-wrapper">
  <img class="image">
  <div class="spinner"> </div>
</div>

<style>
  .spinner { display: none; width: 100px; height: 100px; position: relative; z-index: 10;}
  .spinner.loading { display: block } 
</style>

此外，当您的javascript添加微调器类时，请确保您的ajax调用是异步的，否则旋转器不会在合适的时间添加。

一个更全面的例子：http://preloaders.net/en/ajax_loader_script

将加载图标div放在缩略图后面

1 个答案: