Question

我正在尝试使用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安全策略阻止了我。

非常感谢任何帮助/指导。

Answer 1

为什么不使用doc's中显示的模态，只需将数据属性放在图像包装器中。这样你就可以获得预装的所有内置功能等等。

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

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

在引导模式加载内容时显示加载动画

1 个答案: