当启动模式加载内容时显示加载动画

我想使用Bootstrap模式在我的网站上显示较大版本的图像。当有人点击图像时，我打开模式并使用jQuery的html()函数加载图像。当启动模式加载内容时显示加载动画

jQuery('.myimage').click (function() { 

      // determine the URL of the image to show 
      var imageURLLarge = "some/cdn/location"; 

      // load the image in a DIV element inside modal 
      jQuery('#imgContent').html ('<img src="' + imageURLLarge + '"'); 

      // show the modal 
      $('#myModal').modal('toggle'); 
});

该代码工作正常，并显示图像。但是，如果图像很大，尽管模式显示，图像显示需要一些时间。我想在等待时间内显示进度条或加载动画。我怎么做？

我查了几个地方，他们大多建议使用JQuery的AJAX方法，如load()。但是我无法使用AJAX，因为我的图像来自不同的URL（CDN），并且AJAX的相同URL安全策略阻止了我。

任何帮助/方向将非常感激。

来源

2014-09-25 hashbrown

为什么不使用doc's中显示的模式，只需将数据属性设置为图像包装。这样，你得到所有的内置的IT功能预加载等

<a class="myimg" 
    href="yourlargeimage.jpg" 
    data-toggle="modal" 
    data-target="#myModal" 
><img src="yoursmallimage.jpg" /></a>

如果提供了一个remote网址（大图），内容将通过jQuery的load方法加载一次并注入进入.modal-content股利。如果您使用的是data-api，则可以使用href属性指定远程源。

来源

2014-09-25 06:34:36

这是因为我不想在一开始就加载大图像。我通常在网页上显示较小尺寸的图像，以便页面加载速度更快。只有当有人点击图片时，我才想展示更大的版本...... – hashbrown 2014-09-25 06:39:15

“href”属性中的图片或网址只在模型中加载，而不是从*开头*中加载。因此，如果您从一开始就在“”标签内放置较小的图像，那么这应该都很好。 – 2014-09-25 06:40:02

是吗？我不知道..让我试试.. – hashbrown 2014-09-25 06:41:12

当启动模式加载内容时显示加载动画

回答

相关问题