Question

我有一个移动网站，所有内容都在一个PHP页面上，而页面（或者更确切地说）与jQuery交换。我想加快加载时间，并且必须加载的大部分是每个人生物的图像。我想使用jQuery只在他们的bio导航到时加载人物图像。我猜我需要使用AJAX，因为我们不能依赖页面刷新。有什么指针吗？谢谢！

Answer 1

你可以使用jquery load在dom完成加载后加载图像

$(function(){
   $("#imgUser").load("images/testimg.jpg");  
});

Answer 2

请澄清这个问题。您想要在某些用户点击或仅图像上完全加载内容吗？

在这种情况下，你可以这样做：

HTML

<div class="gif-container">
    <a class="load-gif" href="https://media.giphy.com/media/TGHXd9J6mK6sM/giphy.gif">Load GIF</a>
</div>

JS（使用jquery）：

$('.load-gif').click(function(e) {
  e.preventDefault();
  var gif_url = $(this).attr('href'),
    $gif_image = $('<img>').attr('src', gif_url),
    $container = $(this).closest('.gif-container'),
    $trigger = $(this);
  $gif_image.load(function() {
    $trigger.remove();
    $container.append($gif_image);
  });
});

完整小提琴：https://jsfiddle.net/ryyoLgzz/

使用AJAX（jQuery）单击加载图像

2 个答案: