I have a mobile site, with all the content on one PHP page, and the pages (or div's rather), are swapped with jQuery. I want to speed up the load time, and the bulk of what has to be loaded are images on each persons bio. I would like to use jQuery to only load the persons image when their bio is navigated to. I'm guessing I need to use AJAX because we can't rely on a page refresh. Any pointers? Thanks!
Add a comment
|
2 Answers
you can use the jquery load to load the image after the dom is completed to load
$(function(){
$("#imgUser").load("images/testimg.jpg");
});
1 Comment
ansarob
Hmmm, okay, hopefully I'll get to this soon and can try it, thanks.
Please clarify the question. You want to completely load the content at certain user click or only thje images?
In that case you can do something like this:
HTML
<div class="gif-container">
<a class="load-gif" href="https://media.giphy.com/media/TGHXd9J6mK6sM/giphy.gif">Load GIF</a>
</div>
JS(using 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);
});
});
Complete fiddle: https://jsfiddle.net/ryyoLgzz/
