Hey there- Semi new to javascript, a couple of questions. If I preload a bunch of images on Page-1, are they then made available in Page-2 instantly? What if Page-2 displays these images via a jQuery plugin, do the same rules apply? Thanks!
Yes, they should be available on page 2, because if you preload rollover states for navigation buttons, for example, you only need to preload them the first time the site is accessed. The images are then cached and available to subsequent pages you view on the same site.
I'm not sure about the jQuery plugin part. Do you know the specific plugins you'll be using?
I haven't done any testing on this, but I'd imagine a lot of this depended on how the user had their caching set up. Generally speaking you can pre-load images and they'll remain the cache. There's a nifty html5 feature that allows for pre-loading to help with this as well.
Related
I'm trying to use the Slick Slider to progressively load the slideshow contents. I've found plenty of documentation that supports the loading of images, but I'm using this to slide between embedded info graphics built from infogr.am. I don't really have the best handle on JavaScript or jQuery. I am mainly wondering if this is possible, or if anyone has encountered a similar issue and managed to get it resolved.
Thanks in advance. If you need more information let me know and I can post more.
We have been building online catalogs for motorcycle parts for our online store.
Originally we did this with a program that turned PDF's into flash catalogs, but flash can't run on a lot of devices as you know and these devices are now getting super common.
So we have build an alternative in HTML, we exported each page of the original PDF's into images and built them into a jquery book.
http://www.thehogfathermotorcycles.com/catalog/jcata/mag.php?a=cce&b=2014&c=1
Some of these catalogs (like the one above) is over 1000 pages. I think you see the problem coming by now.... How on earth do we stop all 1000 images loading at once?
In a perfect world we load say 20... as the user flips through the catalog new images load on the back of this 20.
I really am stumped with this, how would you do it? We tried lazy load but unless you are scrolling vertically it does not work.
any help would be seriously appreciated.
Simple answer? Don’t add thousands of images to a HTML page.
More verbose, helpful answer: You could create a PHP script where you paginate the catalogue items, and then use AJAX to load the next “page” via pagination links. Destroy the previous page, replace with the next requested page.
We discussed this topic with colleagues... Is it better to hide/show or add/remove GIF loader in HTML using JavaScript? We came to this:
Hide/show pros:
showing the loader does not require its creation using JavaScript so it should be faster; Is negligible?
is simpler
GIF picture is readily available
Add/remove pros:
removing the loader (thus DOM element) should speed up querying/working with DOM elements
if your site has a lot of loaders, it is possibly slower to download; Can negate using HTML5 Application Cache?
lazy loading - GIF picture needs to be downloaded only if it is necessary
Are there more pros/cons? How do you work with GIF loaders? Which technique do you recommend? Lets assume two scenarios:
There are multiple loaders on the page...
a.) using a single GIF picture
b.) using more GIF pictures
In my experience, hide and show is a better approach because it doesn't mess with the DOM. There probably isn't any performance benefits but if you remove it from the DOM and then re-add it later it is possible to lose JS event bindings unless using jQuery's .on() event handler.
May I also add that while GIFs are a long supported feature of most browsers, CSS animations can create much smoother loading indicators and have smaller file sizes, too.
The answer is, there is no easy answer to your solution. Is it a simple web app? is it a HUGE application that needs to have an animated gif attached to it to load?
If you have a larger application:
simply preload the animated gif (either using modenizr.js or css) and then you can simply make it the background of a div that you can append to anything at any time and remove it gracefully. (extremely fast, saves memory). the downside is that if you are not very experienced chances are you might forget to remove it correctly.
in your css
.loading{height:100px;width:100px;background-image:url(loader.gif);background-position:center center;}
this is now your "loading div" and css will load the background image into memory.
next
what ever ajax div you have (lets assume it is #content)
$("#content").append("<div class='loading'></div");
then whenever you want to get rid of it ( probably on the ajax return call)
$('.loading').remove();
I think this piece of coding resolve the problem:
$(window).load(function() {
$("#loader").remove(); //call the image with id like #loader
});
Ok so I am in the process of building my first Javascript 'framework' or 'bootstrap' which will be implemented in combination with a single pre-processed CSS file. I am gathering my favorite content slider, smooth scroller, content slideshow, parallax elements & bg-img, sticky elements, among a few more cutting edge navigational & UI based scripts (cross-browser/platform/device/viewport compatibility and performance). My problem is when constructing my demo page with all combined elements in place loaded and active on the page... well many seeem to require a different version of Jquery to be called in order to function properly. I have managed to get them to work properly while testing by carefully reordering the jquery librarys as they are called in the of the page. Now here is my (2) part question:
How do I get all my JQuery to work properly without loading multiple versions of it (one for each script almost)
I have a sample in my portfolio which I would love to use as the example. http://www.nicholasabrams.com/ (non mobile device version). In the src for that URL you will see only (1) js and (1) css - including the jquery libraries which are ALSO included in the single .js in the begining of the file. Please don't flame me, as I am asking for help. The link above works fine now (with apple as a slight exception)... but I am just trying to eliminate any bad practices I have as I have just started as a web developer at my first large company. Thanks!!
PS: Would post a snippet but its quite a large js file as you would imagine but if you will, please inspect my src and let me know what you think because my sites first load decreased from 22 seconds to 4-7 seconds after doing the above I wish I could just include the latest version of JQuery!)
if I understand you correctly you are loading more than one jQuery library to the page (in different order)? That's a mistake - you shouldn't do that.
What you should do is make sure that the plugins you work with are compatible with the library you are working with. If they're not - wither find other plugins or fix the ones you have to support the jQuery language you are using.
You have a 2 megabyte hi-res background image, that is insane! I would scrap that and the swirl image, while it may look cool to you, it is distracting and may actually make people want to avoid your website. It makes it difficult to concentrate on the text in the middle of your screen. You don't want people to remember the swirling image, but rather your portfolio, right?
You also have 404's on the following:
http://www.nicholasabrams.com/ScrollSpy_files/result-light.css
http://www.nicholasabrams.com/example-images/testing_station.png
404's are bad for several reasons, they are a wasted resource as they slow the loading of your page, because it attempts to find something and does not find it, and, finally, they have a negative impact on your SEO, specifically Google PageRank docks you for any 404's.
Find a way to work with one version of jQuery, it will eventually bite you to have multiple versions of the library and it is a bandwidth killer to have your users load up a bunch of libraries, even if they are CDN'd.
I saw some web page which has a large number of images, only the images inside the scrolled viewport is displayed, for the outside images, when I scroll down to it, it will be loaded.
How that can be done?
try this jquery lazy load plugin, it works great, is very customizable,
and you dont have to deal with cross browser issues :
http://plugins.jquery.com/project/lazyload
The magic word is "Lazy loading". I have no experience with it but this plugin is one of the most popular solutions.
You may take a look at the following article which uses jquery.