Techniques for loading page with several thumbnail images (laravel 5.3) - javascript

I have a web site with a section with several small images (about 24) per page. When I visit the page I can see the page being enlarged, text is shown before the associated image and etc. That's not a problem for me, because I know that the web was designed to work this way so that web site visitors could see something before the page is fully loaded. The problem is that, today, people are fighting against this principle to achieve beauty, hiding sections of the page until it is completely loaded is common if not required. I cannot fight this (If I could I would). When I show my website to some developer I can see that he completely embranced this idea of beauty in favor of "old principles".
I never really tried to design a page that has a "smart image loading" so I don't know where to start and that's why I'm here. If you can list me some techniques, plugin and etc that can be used to perform progressive image loads in pages would be helpful.
My page is being loaded by simply returning a view with all the images. I assume that to achieve the smart image loading I will have to get the images and associanted text by returning json from the controller, is that correct? If so, I will have to make a major change in my system. I briefly saw a technique that it sets all the images on the page to an animated gif image and then when the data is fetch from the server (using ajax/json) it substitutes the src atribute of the image, is that a good technique. Again, what the best tecniques are?

You can use jquery and css to display a loading animation before the page completely loads
Tutorial: http://smallenvelop.com/display-loading-icon-page-loads-completely/
Working example : http://smallenvelop.com/demo/simple-pre-loader/
Big Company's website who uses loading animation : https://club.ubisoft.com/
Just a warning: website who uses this technique will look slower, user might even leave the website before the page loads, I personally think the default behaviour of showing text first is still the best.

Related

Show loading icon during the javascript execution in asp .net page

I need to show loading icon when the page loads or clicking the link in the page which calls a javascript. Code is fully written in javascript for any operation in asp .net
Any suggestion would be helpful. Thanks
You can't use something like
<img src="Icon.png">
because you're not sure if the image will be fetched before the page. Especially if they refresh the page, it won't be likely.
For a static image, Probably the best way to do it is with a data url (search in Google and you can find someone to encode any image into a data url).
Or you can use some animated css, which is becoming more popular. Search for "css loader spinners" on Google and you'll find a number of examples.

How can I make a web-page preview

I'd like to place a modal window with a description of an external page. But to give the user more information about the page he about to visit I'd like to provide him with a page preview.
I can see the following ways:
render a page with tools like CutyCapt - not working on my hosting :(
make the screenshot with external recources (I found some - all not
for free, I would try to find free tools)
show the page as it is using something like frame (frame tag is not
supported by HTML5).
My questions:
Is there any PHP tools to render a web page to PNG image not so
demanding as CutyCapt is?
May be I missed any worthwhile online tool to render a page to an
image?
I never used "frame" approach earlier so: is there any pros and cons to go deep into
it? Am I right that HTML5 analog of <frame> tag is <iframe>?
Did I missed any other way to do my job?
Thanks!
I once had a function on a page of mine which would load a specific page using an ajax-request and php-curl functions and then would just dump all the contents in a dynamically created <div> (Although I agree that the <iframe> is a better choice for this). But at that time I could not really adjust its size which made it kind of clumsy.

Loading A Web Page Seamlessly

I have seen some websites that include nice transitions between pages, such as sliding or fading, etc. Most of these I have seen are actually one page that just transitions various sections. Then I came across a website that does it differently.
If you view this site and click the various pages the pages transition smoothly but the URLs are different and it doesn't appear to be one page site with hidden sections.
How is this done? I looked for explanations on how to do this but never found a good answer. Any help in determining how this is done would be great.
Note: I am looking to replicate this feature for websites I build so I am looking for an answer that will explain the idea or process of how this is coded.
The technique you're talking about is using history.pushState() which is quite new feature of html5. More info you can find on MDN - Manipulating the browser history
The trick this page does to move from page A --> page B involves 3 main steps:
Load the whole page B or only the content that is different from
page A (probably using XMLHttpRequest).
Swap in the changed content (e.g. updating the body,..)
Update the browser location bar with the URL of page B without
refreshing the page, using a particular HTML5 history method called
pushState.

JavaScript preloader of more JavaScript

I've seen a few tutorials on how to create a JavaScript preloader for images. Is it possible to use a JavaScript preloader for other JavaScript?
My website uses mootools (and others too) for animations and a copious amount of pictures, etc -- therefore it takes awhile to load. Is it possible for the website to have a "loading" centered in the page -- and nothing more -- until all the Javascript libraries load, all the images load, etc. The website has around 300k of JavaScript (compressed), 800k of images on the front page.
In pure flash design, it's possible to have the flash movie simply say loading before any of the associated libraries, other code, images, download and appear. Can this be done in JavaScript?
Execute all your code on window.onload()
Here's a ridiculously simple example to give you the basic idea: http://jsfiddle.net/kennis/jHJ3T/1/
Think of the hideous red div as your preloader. Once the document loads all the resources (images, js files, whatever), the preloader disappears and your content is now visible and your javascript libraries have been fully loaded and are ready to execute.
If you want run the jsfiddle example more than once, change the "random" values at the end of the image tags so your browser doesn't pull cached versions.

Facebook Like And Twitter Tweet Load Slow

I have put a facebook like, facebook send, and twitter tweet button 10 times on my web page (1 for each article in my thread), but yet the page loads very slowly. Right now the site is just running on my local XAMPP stack but when I comment out those widgets, the page loads instantaneously. Otherwise it takes like 10 seconds to load.
It would be helpful to see the code to make sure you are applying it correctly, but I've experienced similar symptoms before. The way I would render it is by having the associated external Javascript files just before your </body> tag and not in your head. If the connection to the external host is slow, it can cause parallisation issues so you want to load it last.
This is happening all over the web lately. I'll see a slow-loading page and sure enough at the bottom there's a note that facebook or twitter is still loading.
The solution I found was an extension that shows the FB, Twitter buttons but doesn't actually load them unless you click the button. That way your page loads quickly and if FB or Twitter is slow that's their problem.
I use Sharrre for social sharing buttons. I activate it on mouseover so nothing is loaded until the user actually needs it. Hard to get it faster than this. It also supports a few other networks.
I don't load social sharing buttons directly anymore and only do it when there is no other option. Those things are horrible for loading times specially if used multiple times on the same page.

Categories