用jquery预加载gif注释加载内容div并关注facebook twitter [英] Load content div with jquery preload gif comments and follow facebook twitter
本文介绍了用jquery预加载gif注释加载内容div并关注facebook twitter的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用jquery将内容加载到div中，该内容已加载有预加载的gif，但是在加载社交按钮facebook注释和将要加载内容的图像之前消失了，我希望图像gif一直保留到所有内容已加载.我留下我的代码:
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>
您要加载的内容示例大致相同，只是有所不同，但是都包含注释facebook，图像和文本.
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>
推荐答案
尝试以下操作以显示正在加载的图像，通过ajax加载内容，等到所有图像加载完毕，然后删除加载的gif.
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取自: jQuery Ajax等到所有图像都已加载)
(imagesLoaded fn taken from: jQuery Ajax wait until all images are loaded)
您的页面:
<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>
在1986.php页面中，您将移动Twitter和Facebook插件.
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>
这篇关于用jquery预加载gif注释加载内容div并关注facebook twitter的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
