问题
I'm loading content into a div using jquery, the content is loaded with a preload gif but this disappears before you load the social buttons facebook comments and images that will load content, I would like the image gif remain until all the content is loaded. I leave my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/></script>
<script>
var disc = function(div,of){
$(div).html("<img src='loading.gif' id='load'>");
var ajax = $.ajax({url : of, type : "GET"});
ajax
.done(function(response){
Commons.sorDone(div, response);
FB.XFBML.parse(document.getElementById('redes'));
twttr.widgets.load();
})
.fail(function(){
Commons.sorFail(div);
});
}
Commons = {
sorDone : function (div, response) {
$(div)
.html(response)
},
}
</script>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.4&appId=578756807601583";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="lateral">
<a href="#inicio" onClick="disc('#content-right','1968.php')" >road</a>
<a href="#inicio" onClick="disc('#content-right','1969.php')" >street</a>
<a href="#inicio" onClick="disc('#content-right','1970.php')" >house</a>
<a href="#inicio" onClick="disc('#content-right','1971.php')" >mouse</a>
<a href="#inicio" onClick="disc('#content-right','1972.php')" >usa</a>
<a href="#inicio" onClick="disc('#content-right','1973.php')" >parking</a>
<a href="#inicio" onClick="disc('#content-right','1974.php')" >red</a>
<a href="#inicio" onClick="disc('#content-right','1975.php')" >black</a>
<a href="#inicio" onClick="disc('#content-right','1976.php')" >green</a>
</div>
<div id="content-right">
</div>
</body>
</html>
Example of content you want to load, are all more or less the same with some differences, but all include comments facebook, images and text.
1968.php
<div id="description">
<span class="informacion">The group</span> <br>
<p class="text"><div class="picture left" style="width:266px;">
<img src="road.jpg" alt= width="266" height="266" />
road street
</div></p>
<p class="text"><div class="picture left" style="width:266px;">
<img src="class.jpg" alt= width="266" height="266" />
road street
</div></p> <p class="text"><div class="picture left" style="width:266px;">
<img src="cover.jpg" alt= width="266" height="266" />
road street
</div></p>
<p class="text">
Cats is a musical composed by Andrew Lloyd Webber, based on Old Possum's Book of Practical Cats by T. S. Eliot, and produced by Cameron Mackintosh. The musical tells the story of a tribe of cats called the Jellicles and the night they make what is known as "the Jellicle choice" and decide which cat will ascend to the Heaviside Layer and come back to a new life. Cats introduced the song standard "Memory".
Cats is a musical composed by Andrew Lloyd Webber, based on Old Possum's Book of Practical Cats by T. S. Eliot, and produced by Cameron Mackintosh. The musical tells the story of a tribe of cats called the Jellicles and the night they make what is known as "the Jellicle choice" and decide which cat will ascend to the Heaviside Layer and come back to a new life. Cats introduced the song standard "Memory".
</p>
</div>
<div class="redes"><div class="facb"><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.example.com&width&layout=button_count&action=like&show_faces=false&share=false&height=21&appId=575456805501583" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe></div> <div class="twt-discografia"><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.example.com/" data-lang="es">Twittear</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></div></div>
<div id="para-coments">
<div class="fb-comments" data-href="http://www.example.com/" data-width="700" data-num-posts="36"></div>
回答1:
Try the following to show a loading image, load content via ajax, wait till all images are loaded, then remove the loading gif.
(imagesLoaded fn taken from: jQuery Ajax wait until all images are loaded)
Your Page:
<script>
// Fn to allow an event to fire after all images are loaded
$.fn.imagesLoaded = function () {
$imgs = this.find('img[src!=""]');
// if there's no images, just return an already resolved promise
if (!$imgs.length) {return $.Deferred.resolve().promise();}
// for each image, add a deferred object to the array which resolves when the image is loaded
var dfds = [];
$imgs.each(function(){
var dfd = $.Deferred();
dfds.push(dfd);
var img = new Image();
img.onload = function(){dfd.resolve();}
img.src = this.src;
});
// return a master promise object which will resolve when all the deferred objects have resolved
// IE - when all the images are loaded
return $.when.apply($,dfds);
}
var disc = function(div,of){
$(div).html("<img id='loadingGif' src='loading.gif' id='load'>");
var ajax = $.ajax({url : of, type : "GET", cache: false});
ajax
.done(function(response){
Commons.sorDone(div, response);
/* MOVING
* FB.XFBML.parse(document.getElementById('redes'));
* twttr.widgets.load();
*/
})
.fail(function(){
Commons.sorFail(div); //you didn't show a fail fn - this fn call fails
});
}
Commons = {
sorDone : function (div, response) {
$(div).append(response).imagesLoaded().then(function(){
//now that all images have loaded, remove the loading gif
$('#loadingGif').remove();
//or you could fade it out
//$('#loadingGif').fadeOut("fast", function() { $(this).remove(); });
});
},
}
</script>
In your 1986.php page, you would move the Twitter and Facebook plugins.
//at the bottom of 1986.php
<script>
FB.XFBML.parse(document.getElementById('redes'));
twttr.widgets.load();
</script>
来源：https://stackoverflow.com/questions/31836578/load-content-div-with-jquery-preload-gif-comments-and-follow-facebook-twitter