I am using pagePiling.js, and have added a couple of extra sections. These are using iFrames to load Highcharts graphs, as can be seen here. However, at the moment, all 12 iFrames respectively the graphs are being loaded, which makes the user wait a few seconds unnecessarily on the first page (and consumes bandwidth).
Is there any way to load the iFrames only the moment they are getting the focus? Or perhaps, a bit smoother, to load the next-upcoming graph while the current graph is being focussed on? I haven't really found something like this.
Thanks for any hints.
Related
After staring at my screen for several days in a row trying to find a solution to this, I couldn't find one. Everything I've seen shows graphs being reloaded with new data, not the same data. If I want to keep the same data and same everything but still reload the graph, how would I do so. This plunker should give an idea of where I want it implemented. I have almost everything done, I just need to know a way to straight up reload only the graphs. Thanks.
The reload would go in here (yes, I do have another piece of JavaScript that allows onresize of divs).
function finalResize(){
}
addResizeListener(frontElement, finalResize);
I have a page containing multiple Highcharts graph. For instance: http://baptiste-wicht.com/perfs/index.html
I think that the loading time is a bit slow (I'm on Firefox). The page blocks and then everything display at once, it is not really practical.
I have a div for each graph and each graph is loaded with jquery $ function (once the page is ready).
Is there a way to make the different code blocks run in parallel or simply improve highcharts loading time ?
Even if the page still take long to finish rendering, it would be great if the rendering were done smoothly.
Thanks
I have been making a simple website with AngularJS and D3JS and created a custom circle mesh library (very crude). It all works fine in Firefox but it doesn't work in Chrome. The website is up at petoknm.github.io . In my homepage I have this circle mesh thing that displays the circles. But when I transition (directly) to another page with this circle mesh (programmming page) it starts behaving differently. And when I go from programming to home it starts to ignore the clipPath on the first two images (two probably because of the two images in the programming page). The svg is identical (I checked only the first three 'a' tags with the images and the first three clipPaths) to the correct svg that was there first... I don't know what happens.
This is a screenshot just after first loading the page
http://i.stack.imgur.com/2fAI6.png
This is a screenshot after coming from the programming page
http://i.stack.imgur.com/JLO3r.png
As you can see the clipPath is still in the svg and "shown" by Chrome but is not actually used (or is ignored).
Please help, I have no idea why it happens and why it's no problem for Firefox
I'll make an educated guess and say it's because your programming page is reusing ids "#clippath0" and "#clippath1". Because it's a single page site and you are replacing the parts of the DOM that contain those references, perhaps there is a bug in Chrome where it getting confused over what they point to.
Try using different sets of ids for each page and see if that fixes it. Maybe you could add different prefixes for each page (eg "#homeclippath0" and "#programmingclippath0").
It does seem like a bug in Chrome though. Perhaps you might want to report it.
My organisation are an ecommerce company and have a numberv of pages displaying a long list of products, some pages can have 20 products while others may have up to 100! - Don't ask me why!
I have been tasked with improving the load times of these pages, profiling shows that the majority of the load time is from the markup - there is too much of it!! Due to the amount of info the business must show the markup cannot really be reduced.
This leads me to looking at alternatives and one would be lazy loading of the product markup as the user scrolls down the screen (we currently use this technique for product images).
Does anyone have any experience with doing such a thing that they could share? - the worry is that this could impact performance within the page
Any alternate methods would be listened to as well
Look forward to any opinions
You can dynamically load content while scrolling.
You can load all key data in your barebones HTML and then add necessary markup flourish with Javascript.
Alternatively, you could send a compact XML document and apply an XSLT transform on client side if client accepts it (see 'Accept:' header).
One thing to look at is adding in compression to what the browser is sending. This will substantially reduce the page payload.
As others have mentioned, loading page content can cause a number of problems, especially for users with accessibility needs (which is a much larger percentage than most people think)
I used the following aproach to hide the makeup time to render/create the content (android, jq and jq-mobile)
a) The content is generated in the background. Always small pieces are created (duration 20-30ms) and insert into the dom. After around 50ms (setTimeout) the next piece is created and inserted into the dom
b) Android specific: I noticed that the first selection of an DOM element (e.g. $(‘#xyz’) )takes relatively long (approx 10ms) . If the element is accessed the second time, it takes only 1ms (Samsung S3).
Hope this helps
I am loading a bunch of images for a GUI which will pick attributes for my clients product.
Is it best to pre-load all the images at the start (which I'm guessing would take some time) and then have the GUI have full functionality or is it better to load images on the fly.
Essentially i am working on a picture/poster framing application. I have about 20+ frames that will be able to be selected by the user and when a frame is clicked I change the images for the frame on the display in the GUI.
I am using Jquery. Any insight would be helpful as to the best case scenario for this.
And if I will be pre-loading all the images how do I put one of those loading bars on the screen like you see in Flash or a loading gif like i've seen in Ajax?
Thanks
Mike
Why not do both?
You can load images lazily, but also hook $(document).ready() to pre-load the images. That way, if the user accesses an image before it's preloaded, it comes in then; if the user waits long enough it will be instantaneous.
This technique is common with things like menubar roll-overs.
Depends on frame images' size...if they are small like 1 - 2K, I'd load the images dynamicaly, otherwise you can preload, but be sure to set the headers right so only once are read and fetched from cache next time.
As for progress bar, I suggest you check this article (talks about preloading images in jQuery and includes progress bar) on Ajaxian.
The correct answer depends on many factors. How large are the images and how many are there? Will loading all images at the start cause severe lag? As Jeff Atwood said Performance is a feature.
I would err on the side of a better performing app, rather than loading everything up front.