单击<a>标签</a>时显示预加载器图像<a>？</a>

Question

我希望所有 HTML链接（ <a href=... ）标签在单击时显示屏幕的图像中心（GIF预加载器）。 当前，我有一个显示加载进度栏的代码，但仅显示该页面何时加载。 我希望用户单击链接后立即显示GIF预加载器。

什么代码，我需要在哪里添加？

Answer 1

尝试这个，

$(function(){
    $('a').on('click',function(e){
       $('<img src="image-pat/img.gif" class="image-loader"/>').appendTo('body');
       // ....
       // your code
       // ....
       if($('.image-loader').length) { // check length to remove image-loader again
          $('.image-loader').remove();// use, if you want to remove the loader again
       }
       return true;
    });
});

Answer 2

使用jquery .imageloader（）

<img class="img" src="image.png" />
<script>
$(function() {
$('.img').imageloader();
});
</script>

将功能添加到按钮

希望这可以帮助。

请访问此处以获取大量示例。

.imageloader（）

试试这个

Answer 3

您必须预加载图像。 为此，创建一个图像元素并隐藏该图像，仅在单击时显示。

要么

您可以在文档就绪函数上调用createElement并按如下所示设置其源：

var elem = document.createElement("img");
elem.setAttribute("src", "images/my_image.jpg");

然后，当您在其他地方使用该源时，它将立即显示该图像，因为该图像已被浏览器加载。