How to change Image Loading Order (for Lightbox) - javascript

I've got a page with a lot of images (thumbnails). You should be able to expand the images via Lightbox. I need to encourage the browser to load the image in the Lightbox before any other image (thumbnail).
I remember some articles (I can't find anymore) on how to influence the loading mechanism of the browser (use a different subdomain to allow another thread), but I'd like to know whether there might be other options (i.e. without additional subdomains).
To clarify the issue:
Example (how I'd like it to behave)
I visit the page
I click on the 3rd picture thumbnail
The 3rd picture is shown (while the remaining thumbnails are loading)
Example (how it behaves right now)
I visit the page
I click on the 3rd picture thumbnail
A spinning wheel is shown until all thumbnails are loaded
The 3rd picture is shown
Are there any tutorials/papers/views on this issue?

Just did it with using jQuery $('<img>').attr('src', ...) in my custom queue-manager which limits the browser to load images 1-by-1 thus having the capacity to load additional images that might be showing up on the page (like the one in the lightbox).

Related

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

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.

Detecting "Missing Video" Youtube Image

Greetings from a future caveman,
I load a lot of youtube thumbnails on my page. They load from thumbnail urls I have in my db.
From time to time the video in question is changed or deleted by the author on youtube. This leaves me with 2 problems:
I'm loading the blank picture from youtube
In my db I still have this image url listed.
What would be a solution for figuring out the "missing video" thumnail, NOT displaying it, and updating my db. I need to fire an event by recognizing this image. Note that this is the default "missing" image that can appear different urls. So it's not a simple matter of seeing a particular url.
I also thought of using youtube api but making a bunch of calls every time the page loads seems counterintuitive to me.
I need to detect the image and fire so some of even for JS/jquery to use to update my db via ajax.
Maybe I'm overthinking this so if anybody has another solution to my problem I'm open.
I have read this: Javascript - Detect Youtube Default-Thumbnail
But the solution above does not seem to fit. The first option in the answer is what I'm doing now and it doesn't work - because youtube serves the default image even when you use 1.jpg, or 2 etc.. (which is what I use). Basically the video is gone.
The second option (base 64 encoding, creating canvas element etcc) is not really expanded upon and seems rather like using a chainsaw in place of a scalpel.
Thanks
I discovered that if I'm using
http://img.youtube.com/vi/<video_id>/mqdefault.jpg
,
it will display the trimmed (no black borders at top and bottom) YouTube thumbnail. The dimensions of this are 320 x 180px.
Whereas if there is no available thumbnail, you will get YouTube's fallback thumbnail, but that is actually 120 x 90px.
So here's a much easier way for figuring out if you got an invalid thumbnail (as compared to reading base64 data from the <img> tag).
Hope this helps.

Preloading images in Firefox aren't being retrieved from the cache on the same page load

Some context, I am running a script on a website's home page to swap background images on a timer. We decided it would be better to attempt to implement preloading of the images, which prompts the following issue in Firefox:
Preloading images on the first page load will not prevent the browser from loading the image from the original source again instead of the cache. Oddly though, refreshing the page will successfully cause the image to be loaded in from the cache.
The JavaScript that runs on page load takes all of the image URLs, and attempts to preload them via calling (new Image()).src = 'http:// ...'; for each one.
Inspecting the page load revealed that the images would be loaded in on page load, but then the image would also be loaded in again when the slide was revealed.
Test Image Link (SO reputation restrictions): http://i.stack.imgur.com/E9KLM.png
In the image, the images -66.png, -21.png, -63.png, and -83.png were preloaded from the JavaScript, but are then requested again when the slider reveals that slide.
What's also strange is that the bottom images look like they were queued to be loading in since the page was created. Maybe it's because this takes priority over the script that was loaded once the document was ready?
To finish off, if I was to refresh the page and jump to a slide that was preloaded with the images, but never revealed, it is shown to be loaded from the cache like it should have been originally.
My theory is that the original background images are maybe declared to needing to be loaded from the server when the page is first loaded, but aren't actually loaded until the slide is revealed. On document ready, when the javascript preloads the images, they're not cached yet so they need to be loaded from the server. Then a slide is revealed and the browser tells that image that it needs to be loaded as originally declared.
Does anyone know why this situation is occuring? If so, are there any solutions to resolve?
I have an idea that involves adding the image URLs as a data-url attribute instead, and then having javascript preload them and add them as background images at that point, but I haven't tested this yet.
For those interested, we were not able to find a perfect solution for this.
What we did notice, however, is that the images were being pulled again based on their size. The larger the image size, the more likely the image was not fetched from the cache when the image was shown to the user.
We semi-resolved this issue by compressing our background images even further, and then greatly limiting the amount of images preloaded on the first page load. We found that these two steps greatly increased the changes of the images being pulled in through the cache when needed. It also saved more bandwidth and improved page loading times in general by a significant amount.

JS gallery page loading differently from main site JS gallery page

My goal is to link to photo galleries directly on a web page that uses a Jquery’s “Animate” and JS/CSS. The page in question is witold.org (click on either photo to go to a gallery I want to link directly.)
I learned why this is not possible due to security issues.
As such, I was thinking that perhaps I can create additional HTML pages for each gallery with just the gallery script. For example, this page.
But even though I am using the same gallery script, linking to the same CSS and same JS, the gallery has a lot of errors. Gallery seems to partially load: no photos load initially but when mouse is over the thumbs they show up, and when one clicks on a thumb the large JPG shows up. But then everything seems to stop working. I can't increment to next photo via clicking thumbs or clicking arrows.
I am missing some fundamental piece of this, but not sure what... I guess my question is that if I navigate to the gallery via main page it works but when I strip only gallery code to a seperate html page the code fails. Any ideas?

Fancybox v2: Loading animation is not being shown

In my scenario, I'm linking to fairly large images (both in dimensions and filesize). It's understandable that fancybox will have to load for a few seconds before displaying them. The problem is that the loading animation is not showing up, so when the user clicks the thumbnail, it gives the impression that nothing is happening. Fancybox eventually comes up a few seconds later.
There is a secondary issue, also. The images are set to display as a gallery, via the "rel" attribute. Even when the user is viewing one image, browsing to the next takes a while (again, due to filesize), but because the throbber is not showing up, it seems like the prev/next buttons are not working. Any ideas?
I should add that I'm using fancybox v2.
My code (after including the necessary css and scripts for fancybox and the buttons helper, of course): http://pastebin.com/u3g8U8FS
Updating to the latest version (2.0.6) did the trick.
Make sure that the fancybox_loading.gif as well as the fancybox_sprite.png files are in the same folder as the jquery.fancybox.css file

Categories