Call Image to Load Using Galleria Script - javascript

I'm using a jQuery gallery script called Galleria, in conjunction with a wordpress theme I'm working on. The problem (as you can see) is that no image loads right off the bat, as it should. Is there any sort of workaround you can think of, to force the image to be loaded into that ? Thanks!

Maybe you could trigger a "click" event on one of the thumbnail images that the plugin wraps itself around.

In the unordered list of the images you want to show, add the following to the opening li-tag of the image you want to load by default:
class="active"
Now that image will load off the bat.
Grtz,
Denios

Related

WordPress Lazyloading images breaking Fancybox

I am using WordPress. Fancy box and a lazy loader plugin. However, since adding the lazy load plugin the fancy box has stopped working.
When you initiate the fancybox plugin, you do so with some javascript like so:
var select = $('a[href$=".bmp"],a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".BMP"],a[href$=".GIF"],a[href$=".JPG"],a[href$=".JPEG"],a[href$=".PNG"]');
select.attr('rel', 'fancybox');
select.fancybox();
This fires with the rest of the javascript when the document has loaded.
However, now I am getting this error:
select.fancybox is not a function
I am assuming that the lazy loading plugin is taking the images out of the equation so this function isnt able to do anything.
I have tried attaching it again afterwards but I feel like I am going in the wrong direction:
$('html').on('mousemove', 'a[href$=".bmp"],a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".BMP"],a[href$=".GIF"],a[href$=".JPG"],a[href$=".JPEG"],a[href$=".PNG"]', function(){
$(this).attr('rel', 'fancybox');
$(this).fancybox();
});
Any ideas?
WordPress now includes browser-level lazy-loading attribute for all images, using the 'loading' image attribute (loading="lazy"). Perhaps you no longer need the lazy loading plugin?
See here:
https://make.wordpress.org/core/2020/01/29/lazy-loading-images-in-wordpress-core/

LazyLoading Images with Dynamic Tabs?

I'm trying to lazy load images with dynamic tabs. My code is basically this with images in the tab-content: w3school
And I'm using the lazyload library (I've tried others as well with no luck).
Anyways with that lazyload plugin, it will still load all the images (not lazy loading) in all the tab-panes but I only want the active tab-pane class to load when viewed and the none active tab-panes to not load until active in view.
$("img.lazy").lazyload({
skip_invisible : true
});
And it works, but only when a 1px+ scroll is triggered. Any ideas or workarounds? I'm trying a workaround to embed a listener for onclick of the nav-tabs, but it's not working because I think the tab-content hasn't updated before the scroll trigger is called. Or is there a better alternative than this for dynamic tabs?
Use lazysizes. This lazyloader automatically detects visibility changes to current and future img elements.
Simply include the script, add the class lazyload and use data-src instead of src.
I wouldn't use the lazysizes plugin, because it has hundreds lines of code only for image lazy loading. I think in your case you can use a micro plugin like justlazy. It is without jQuery, very lightweight and efficient.
First, you have to define you image placeholders (in this code example for tab number 1):
<span data-src="path/to/image1" data-alt="alt" data-title="title"
class="image-placeholder-tab-1">
</span>
<span data-src="path/to/image2" data-alt="alt2" data-title="title2"
class="image-placeholder-tab-1">
</span>
It's also possible to use an img-tag to be more SEO friendly. Then you have to set a low quality version of the image as value of the src-attribute. Another option is to use the srcset-attribute for responsive images (see demo).
The second step is to load the images when the the specific tab is opened. Therefore the library has a flexible way to load images via custom events.
To make it easy, just add the following code to your tab buttons:
// e.g. for tab 1
Justlazy.lazyLoad("image-placeholder-tab-1");

Preload images without names of images

i'm looking for a script or a way to preload images before the page become full load. What i found are script where i have to write the name and the root of the images, i need something that load like:
Load all img of the page, after show the page, during the loading of the images to show a preload image ( like loading or something like that ).
It's possible?
I have alrady tried the script on the web, but i found just script where i have to put the name of the images in a array... i don't need it!
I want that javascript load before ALL tag ( without i set the name of the images ) of the page and than show the page!
jquery has a plugin called imageready.
https://github.com/weblinc/jquery-imageready
Ive used it many times, it should work as you expect
Images will start being downloaded by your browser as soon as the DOM renders that part of your HTML. What you need to do is find a suitable animated gif very small size (few kilobytes) of a loading animation. Then have some javascript hide the image you want to show that is still getting downloaded by your browser. By using something like: Javascript callback for knowing when an image is loaded you will be able to check when an image has loaded, and the callback you can hide its associated gif and show the real image.

Load browser images with javascript event?

I've got a page containing a lot of images, which are initially hidden from view as I'm using tabbed divs (ie. hiding some divs using CSS display:none).
Therefore, when then page loads, it takes ages to load all of the images, which looks like the page is slow (as the loading bar on the browser doesn't complete for 10+ seconds).
I would like a way of not loading images until they are visible on the page.
I've played around with jQuery LazyLoad, however this only seems to load images when scrolling the browser (which doesn't work for tabbed divs).
Therefore, is there a way of changing LazyLoad to work like this, or is there a better way of doing this?
Thanks!
Maybe jQuery Tabs could do what you need, with ajax call on tabs...
How do you display your hidden divs?
One plan of attack:
Instead of putting the image URL in the src attribute of the img tag, put it somewhere else (e.g. a hidden span with a particular class above it) and when showing the div, iterate through all the img tags and set the src to the URL it should have had.
As a method it's definitely got some downsides.
If you're using (or can use) the HTML5 doctype, you can use the "data-" prefix for tag attributes:
<img src="" data-src="/path/to/image" style="display: none" />
And then you can use Javascript to fill the src with the data-src:
$(SELECTOR).attr("src", $(SELECTOR).attr("data-src"));
If your only goal is to 'hide' the progress bar which is taking so long due to the large number of images, I'd go for some kind of AJAX solution, since that way the progress bar is not 'used'. It does introduce more complexity in the way you want to load your HTML elements (and possibly when).
I personally don't like using HTML attributes for anything other than their original purpose, so storing the path in another attribute and switching when needed would not be my first option. Instead, I'd try to create a JavaScript array (id => path) and update the separate HTML IMG elements when needed.
Good luck! ;)
I have tried that lately and have to say that this is not possible with js anymore. Maybe it has never been...
Projects like lazyload have always proclaimed that they would stop all images from loading on startup, but you can see in firebug that this does not work. The images are even loaded twice, on domready and when you start scrolling...
Your only choices would be ajax on the on hand or doing something like this:
<img src="transparent.gif" alt="" rel="real image source" />
and then switch attributes when the divs become visible, so the image starts loading.
This works fine as well at least if you don't need google indexing them.
Hope that helps! :)
Edit: Hm, why did I get a -1 when I was just givin an answer? Just have a look at pages with lazyload and enable firebug and then scroll the page. It was even said here on stackoverflow and in the comments for the lazyload plugin that this is the only solution at the moment ... :(
I was unaware of this previously, but LazyLoad does support triggering from events:
http://www.appelsiini.net/projects/lazyload
If anyone needs a hand on how I did this, let me know!

How can I center an image in this kind of script?

I've tried various approaches,
I've no clue how to do it without destroying the script or rescripting it all.
Here's a link to the page: http://hem.bredband.net/noor/bildspelet.html
You need to click the edit button on the top left, put 2 URLs to pictures, take these e.g.
http://barcelona.magicka-evropa.cz/images/fc-barcelona.jpg
http://tux.crystalxp.net/png/uttaresh-fc-barcelona-13276.png
You'll notice the pictures aren't centered.. I haven't put in any code to center it in the example.. How can i go about to do that?
It appears that you're using the jQuery Cycle Lite Plugin. If so, the plugin provides an event called "after" which you would want to listen to.
In that callback, you would want to check if the image is downloaded already or not. Once its downloaded, you would execute your logic to center the image.

Categories