DISQUS

Daniel Ha · 1 year ago

Hi Rob,

Sorry about the issues. The white screen is because of how jQuery
handles onDomReady.

Since Disqus needs to modify the DOM, there is a race condition with
jQuery's event listener. What ends up happening is that Disqus writes
to the page while jQuery is modifying the DOM and ends up writing over
the entire page (e.g. white screen).

This is not an issue with how the Disqus script is written. jQuery's
onDomReady reacts similarly with most applications that need to modify
the DOM. We've been working around this recently and hope to update
you on the matter soon.

Thanks.

Rob Loach · 1 year ago

I knew something was wrong with how the events were being handled. Well, here's something to work off of: http://drupalbin.com/2575 . If there's anyway I can help, feel free to let me know.

Daniel Ha · 1 year ago

Thanks for the contribution, Rob.

zaidler · 1 year ago

will the inclusion of javascript in a web page would make the page to load slowly?
Thanks in advance
regards
Figurative Paintings

manojkumar · 1 year ago

hello

lv handbags · 11 months ago

i prefer to use ajax, it is much faster and your eyes is always on the screen

Moritz Angermann · 11 months ago

I have done exactly the same for my blog application. And ran into the same issue.
The only feasible work around, I found so far is to split the embed.js apart.

The document.write in the embed.js basically just injects the stylesheet. Which can easily been pulled out and offered as separate file. I wonder why this is not a default option for embedding disqus, especially as some people use to alter the disqus theme by overwriting the css, in which case loading the base css is kind of pointless.

One problem persists though, if you split the embed.js apart, you get your forum id hardcoded into the js file.

Assuming you split the embed.js apart, you could do something like this, using jQuery:


if($("#disqus_thread").length) {
var head = document.getElementsByTagName('head')[0];
$(document.createElement('link'))
.attr({type: 'text/css', href: '/media/css/disqus.css', rel: 'stylesheet', media: 'screen'})
.appendTo(head);
$.getScript('/contrib/js/disqus.embed.js');
}


This obviously will only load the disqus script and style if the element with the id #disqus_thread exist and requires the head tag to be present.

You can take a look at it at:

http://journal.moritzangermann.com

the splitted files are (for convinience):
http://journal.moritzangermann.com/media/css/di...
http://journal.moritzangermann.com/contrib/js/d...

chris · 11 months ago

Thanks for this example Moritz.

I've just implemented your mod on a test system ( where I'm trying out Disqus integration) and found this sped page loads considerably. Cheers

Moritz Angermann · 11 months ago

@chis, you are welcome

I just hope disqus will at one point integrate this.

mathi_s · 10 months ago

sorry can't delete

Rob Loach · 5 months ago

I just stuck up the jQuery Disqus Plugin. Thank you to Jason and Daniel for removing the dependency on document.write.

Jasper · 5 months ago

Hi Rob,

Thanks for the plug-in. One issue though, it gives an error in IE6 + IE7, which can easily be fixed by removing the commas in line 70 and 95 of the jquery.disqus.js file. This is a typical IE issue and not the first time I run into this.

Keep up the good work!

Jasper

Rob Loach · 5 months ago

Good find, Jasper! I created a ticket for this at http://drupal.org/node/524340 and will hit it up tomorrow. Thanks!

Rob Loach · 5 months ago

Thanks Jasper, I rolled the update in jQuery Disqus 1.1.25.

Jasper · 5 months ago

Great, that will save other users a small headache :-) The plug-in works great.