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");
Related
So let's assume that there is an article with multiple photo galleries.
Photos in each gallery are arranged in a complex grid, which can be built just via JS.
Size of JS is under ~1KB (gzipped).
The first gallery is likely above the fold.
I'm trying to make the page with these galleries load as fast as possible (optimizing the critical rendering path), and avoid flash of unstyled content (when gallery is unstyled).
Here is where I am now, HTML:
<div id="first" class="mygallery">...images markup...</div>
<script>
/* Inline full JS code required for gallery (~1KB) */
var gallery = function(id) {
...
};
gallery('#first');
</script>
<p>Some other content of any length.</p>
<div id="second" class="mygallery">...</div>
<script>
/* just init gallery using code from the first one */
gallery('#second');
</script>
<p>Some other content of any length.</p>
<div id="third" class="mygallery">...</div>
<script>
/* just init gallery using code from the first one */
gallery('#third');
</script>
etc...
My questions:
Should I init the gallery directly after its element, or should I init all galleries at once (after the last gallery DOM element, or in document.ready)?
Should I hide all galleries via display:none and then reveal them via JS to avoid FOUC? (for no-js users I can add noscript tag with style display:block;)
Should I inline JS at all, isn't ~1KB of gzipped js too much?
Also, should be noted, that when executing gallery() method, getComputedStyle() is called once (which triggers the layout) and then styles are applied (which triggers paint). Does this affect your answer the the first question?
Should I init the gallery directly after its element, or should I init all galleries at once (after the last gallery DOM element, or in document.ready)?
If the goal is to reduce the amount of work the browser has to do to get pixels on the screen, then it might make sense to init each one progressively and on as-needed basis - e.g. only the first gallery and delay initializing others until a little later.
Should I hide all galleries via display:none and then reveal them via JS to avoid FOUC? (for no-js users I can add noscript tag with style display:block;)
For best results reserve the space for the gallery upfront: this minimizes layout reflows and removes that annoying behavior where the page shifts up-and-down as the content loads. For more, see: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing?hl=en
Should I inline JS at all, isn't ~1KB of gzipped js too much?
The answer to this depends on a lot of variables. It may be "too much" if it introduces additional RTT's - e.g. exceeds initial 14KB payload allowed by first RTT of a new TCP connection. On the other hand, if that's not a problem then 1KB is fine. Also, consider impact on caching + invalidations -- e.g. do multiple pages use this snippet or just one, how often the snippet needs to change and does that affect cache lifetime of the page that embeds it, etc.
Does someone have a code example of running an animated throbber during asp.net page loads? More than one example would be appreciated.
A throbber is generally just an animated .gif that holds the place of content. When the content is loaded, that image is hidden or removed from the dynamic element and replaced with the actual content (or vice versa if you're making a form or similar).
Here's a link to the Facebook "throbber" -
http://static.ak.fbcdn.net/rsrc.php/v1/zb/r/GsNJNwuI-UM.gif
Here's a link to a Wikipedia asset: https://upload.wikimedia.org/wikipedia/commons/d/de/Ajax-loader.gif
Matching article: https://en.wikipedia.org/wiki/Throbber
As you can see, it's an animated gif.
Update: If you're still using this for reference then please check out the CSS throbbers in various projects.
On http://ajaxload.info/ you can generate your own :)
You can use asp.net AJAX UpdateProgress control. Put your throbber image in the ProgressTemplate.
The issue with that is you will have to use UpdatePanel for that. If you are already using it nice.
Another options you might want to look into:
Use jQuery to show/hide your throbber.
jQuery UI's progressbar plugin.
When adding JQuery to hide a class it of course waits for the page to load then hides the class, same thing for 'addClass'. There has got to be a better or faster way for it to 'load' as the page is loading. Anyone know of any ideas? I have given my sites JQuery scripts below with links to see them in action:
Hides sub filters: Link to example of my script to hide sub filters (notice left navigation filters)
if(jQuery('.refinement_category_section').length){
jQuery('.refinement_custom_category_section').hide() &&
jQuery('.refinement_filter').hide();
}
jQuery(document).ready(function(){
if(jQuery('.refinement_category_section').length){
jQuery('.refinement_custom_category_section').hide() &&
jQuery('.refinement_filter').hide();
}
});
OR
Adds a Class:Link to example of my script adding Class (notice left navigation filters)
$('.refinement_brand_section').parent().addClass('filterresults');
Using Firebug, it appears that the issue is with the number of images that you are loading. My suggestion is to dynamically load pictures for your items using javascript after applying your style changes or have a smaller number of items on the page (or both). This will result in a degraded, but still functional interface for non-javascript users. For javascript-enabled browsers, you can adjust how and how many images are loaded to still achieve a nice effect.
You should also use sprites for your small interface elements so that you're downloading a single image and using CSS to display various portions of it. Combining your javascript files and stylesheets for your production site would also help quite a bit -- you've got 20+ js files and 13+ stylesheets, each of which requires a separate request. You might want to run YSlow and follow it's other recommendations.
you can add CSS rules to hide these classes and then change it after jquery loads
.refinement_category_section, .refinement_custom_category_section, .refinement_filter {
display: none;
}
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!
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