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

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

OR

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

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

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

单击<a> tag?</a>时显示预加载器图像

3 个答案: