Javascript Charts don't load until FWD then BACK - javascript

I have a problem with the javascript amcharts, but the situation is likely to stem from a more generic javascript issue. Unfortunately it's being behind a development door; so no direct links. But, if I can paint the picture:-
1) Main index page uses jQuery.load() function to load a page of analytics and information.
2) Once loaded; jQuery.getScript() is used to fetch graph data.
3) Nothing appears
The same code works when together in one single static html page (i'm using example data just to get it running right now). It doesn't even work when I put it all in the .load()'d file together.
I've taken it further up the loading tree, so it's all in the main index page, no loading() bits. Still nothing.
However, if I go forward on the browser, then back. The graph is there... ready to go. Any ideas what might be leading to this behaviour?
Any thoughts, directions of investigation very, very welcome.

I've overcome this by using an iframe to load the graphs, not idea but workable solution.

Related

get source code of whole website - which loads additional content after scrolling down

I want to fetch this site
https://www.film-fish.com/modern-mindless-action
to fetch the IMDB IDs of all movies listed there.
The problem is that the page loads all movies listed there just after scrolling down. So, a simple wget doesn't work.
Even if I scroll to the bottom of the page and view the source code, I do not see the last movie in the list (Hard Kill (2020)).
So the problem seems to be that the content is being created via JavaScript.
Has anybody a tip on how to achieve that?
So the problem seems to be that the content is being created via a js
script. Has anybody a tip on how to achieve that?
Indeed, executing JavaScript code is beyond scope of GNU Wget. You would need browser automation tool. If you know some Node.js or JavaScript I suggest taking look at PhantomJS Quick Start, Page Automation. Please take look at first example in 2nd link, you should be probably able to rework to your needs, i.e. instruct page to scroll down using JavaScript then extract what you need using JavaScript.

Issue with Google PageSpeed Insights - Prioritize Visible Content

While developing a full-fledged website for a client, who is slightly obsessed with Google tools and suggestions, I've come across the following issue:
No matter what I do, I cannot achieve a perfect score for the homepage of the site. All other pages are 100/100 on both mobile and desktop, but the landing page gets 91 and 97 respectively - as you can see in the attached pictures.
I have tried all relevant steps I could find, including correctly structuring the HTML code and asynchronously loading everything else, plus lazy-loading the images.
A dummy representation of the code would be this:
html head, metatags etc
inline blocks of css (to "fix" the render-blocking issues)
the html content, in correct order with above-the-fold first
deferred js load
My question is, what am I missing? What else can I do to achieve the perfect score?
For future reference and anyone facing the same problem:
I've solved this issue by reducing the filesize for my homepage PHP file. This was nowhere in the guidelines or the responses around the web, but it was the thing that bumped me up to 100/100.
In my particular instance, I removed every last bit of unnecessary CSS I had included. That alone reduced the size and removed the error.
I consider the issue erroneous however, and will proceed to report this to Google - as "prioritize visible content" has nothing to do with "reduce your file size".

Jquery / Javascript — How to optimise my site load visually?

I'm making finishing touches on my site and am struggling to make the load of the page look less jumpy. best way to show you what i mean is to show the site:
http://marckremers.com/2011 (Still not complete, in alpha phase)
As you can see the contents sticks to the left, loads a ton of jquery and images into the page, and only then click into place (centre).
I'm wondering if there is a way i can make it click into place first and then load the elements?
I tried putting the reposition script just after , not even that works.
Any ideas? Thanks
With all of the images you have, your page is 1.5mb, coupled with 70 http requests. No wonder your site behaves the way it does.
You should be using sprites on the smaller images to reduce http requests and as far as the large images go, you are loading all of the pictures at once. Even the ones that aren't displayed right away. The images that aren't displayed right away should be pulled in via AJAX after the page loads.
If you want to go further into optimization I would also:
Use one external javascript file. Yes
it increases size, but I favor that
over http requests.
Minify your html/javascript/css.
Don't host jQuery on your site, use a CDN such as Google APIS.
Check out a service similiar to Amazon S3.
I could reinvent the web site best practices wheel here, or I could send you to Yahoo best practices for web site optimization There is a ton of very important information there, read it and reference it.
You loaded jQuery twice, once from your own site and another time from Google's CDN. For starters, you should probably move all the JavaScript to the bottom of your HTML. Then you need to optimize your if ... else that handles how many columns to display and your Google Maps iframe.
To speed the visual up, instead of using jQuery, you should probably have some vanilla DOM scripting that dynamically creates some CSS styles for the projects and tb_tweets classes, so it doesn't have to wait for all your JavaScript to load before handling resizing of your projects and tb_tweets.
use http://mir.aculo.us/dom-monster/ and do everything it tells you to do. If you want tools to figure out what is going on during page load, the chrome developer tools are hands down the best out there for client side optimization.
A think you could do is put your javascript functions in the document.ready(function()), this way the functions will be loaded AFTER the page is loaded. I guess you don't need the functions for loading the site, just to interact with it?
Generally you only want to trigger your events after the page has rendered, i.e., using
$(document).ready(function()) {
//your javascript goes here
}
Then, in your HTML you have placeholders so the page doesn't "expand" or "jump" as you put, with some kind of indication that the element is still loading. Then, when your ajax requests complete, simply populate the placeholders with the ajax response.

page injected via jsquery/ajax does not show properly in any Chromium browser

as obviously the css related to the page being injected is not loaded by Chromium. However, it is working well in IE8/O 10.x/FF3.6x.
Hence begs the question - my stupidity in html coding, Chromium bug or jquery bug? that is what I could think of.
this is the page in question, eliminated all non-essential js http://logistik-experte.gmxhome.de/test.html, navigate to resume and see the difference. It is basically driving me nuts as missing the point somewhere and hence any sound advice/help would be highly appreciated.
cheers
I agree with Buggabill: works for me in Chrome 5. (At least on the server; there may be issues with loading files from a local filesystem.)
However there are problems with your approach. By having page content loaded by script only, you have made your page inaccessible to non-JavaScript users, which includes all search engines. Also you can't use the back button and the pages are unbookmarkable, un-open-in-new-tab-able, and so on.
Basically you've reinvented all the problems of <frameset>, the reasons why no-one uses frames any more. You shouldn't really deploy this kind of solution until you are familiar with the ways accessibility and usability can be served. At the very least, you need to point the navigation links to the real pages containing their content. Then consider allowing hash-based navigation, so the dynamically-loaded pages have a unique URL which can be navigated between, and which will re-load the selected page at load time when the URL is first entered.
Also if you are loading content into the page you should take care to load only the content you want, for example using load('portfolio.html #somewrapperdiv'). Otherwise you are inserting the complete HTML, including <!DOCTYPE> and <head> and all that, which clearly makes no sense.
To be honest, as it currently is, I don't see the point of the dynamic loading. You have spent a bunch of time implementing an unusual navigation scheme with many disadvantages over simple separate navigable pages, but no obvious advantage.

Google translate breaks button that makes javascript function call

I have site that works fine but when i put it through Google translate my button that initiates a javascript function doesn't work.
However, some other Javascript calls via links work. Whats wrong?
Example translation
Thank you for any help.
Update
The sister site is even worse, the whole left side goes white?? Wait for it to fully load.
Example site 2
I think it's because when you use Google Translate, you're actually getting the page from Google's domain not your own. Your page then tries to make an AJAX request to your domain, which is now cross-domain, therefore blocked for security.
In order to avoid the translation of elements which should execute JavaScript you can give them a class of notranslate: class=”notranslate”. That should let google ignore these elements.
Could be any number of things I would have thought.
Could be that Google changes the DOM on the page that break the way your script interacts with it. Are there any JavaScript errors on the page?

Categories

Resources