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;
}
Related
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");
I have a web page which loads inside of a JQuery UI Dialog. When the page loads in Firefox, the plain text appears for a second before all the css and javascript runs. Once everything loads, the text appears properly. Is there a way to prevent the text from showing until all the CSS/JavaScript runs? I have tried turning on and off the visibility but that did not work correctly.
This only seems to happen in Firefox, and not in other browsers.
Some people like to call this the FOUC (Flash Of Unstyled Content). If you are using Google Fonts embedded via javascript (resource) then it adds a class to the html tag that allows you to hide content whilst the scripts are loading using normal rules like html.wf-loading #content{display:none}.
However, in my experience this isn't bombproof though. The only way I've found to fairly consistently achieve no FUOC during is to convert your fonts to BASE64 and embed that directly in your CSS (Font Squirrel provide a great resource for doing this). This way your fonts will wait before the CSS has loaded before revealing themselves.
Create a class that hides elements. Add that class to the elements that you want to hide initially. Remove the class after you've run the javascript that you want executed. Something like the following should help you.
.js-needed
{
display: none;
}
//Add this line after you've run the code you want executed
$(".js-needed").each(function() { $(this).removeClass(".js-needed"); } );
<div class="js-needed">Stuff to hide initially</div>
Is there any JS library that can help load different html files based on the dimensions? I guess this would be a mixture of responsive and adaptive, not sure if that's kosher.
Basically I want the site to show a different top menu on a phone.
Instead of arguing with you about how you're approaching the problem, I'll say that yes, there are JS libraries that could help you out.
There's a good writeup about enquire.js at http://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/. This one lets you set callbacks for breakpoints.
Another you might be interested in is breakpoints.js which, similarly, will let you write jQuery to be executed at certain breakpoints.
Is there a reason you'd want to avoid doing this with a purely responsive design? You could include both a phone navigation and desktop navigation, then hide/show via CSS based on browser dimensions.
I agree with #Kolink's comment..
But if you want to do this anyway I would suggest enquire.js.
You will be able to do something like this:
enquire
.register("screen and (max-width:50em)", function() {
// Load top menu content 1 via AJAX.
// Show content menu 1
})
.register("screen and (max-width:40em)", function() {
// Load top menu content 2 via AJAX.
// Show content menu 2
});
The ideal situation is to load just an HTML and change the CSS rules applied to it through responsive design.
If you want to have different HTML versions, then you should redirect to another URL if the request comes from a mobile browser. Look at the following link with different recipes depending on your platform:
http://detectmobilebrowsers.com/
I have a website that has some intense graphics, and people with slow connections might require download time. While their browser is downloading, they have form options. And a lot of times they will fill the form out and hit submit.
This causes an event validation issue, because the page wasn't fully loaded. I can think of a lot of ways off the top of my head to fix this. I could go back and disable every single control, and then write javascript to enable these controls clientside when the page is loaded.
I also looked into blockui, but it will block the whole page or just a div. I am looking for something I can stick in my masterpage and forget about it.
Any ideas?
It seems like the correct approach would be to load in your intense graphics after-the-fact, so that users can still submit forms as soon as the critical DOM elements are rendered. (I'm assuming it's not vitally important that all the images be loaded before the form gets submitted?)
You could do this fairly easily by causing your images to be loaded as CSS-based backgrounds on div and body elements, based on a specific class, like this:
body.loaded {background: black url("http://us.battle.net/sc2/static/images/layout/body-bg-baked.jpg") center top no-repeat;}
Then have the following code to add that class after the page loads:
$(window).load(function() {$('body').addClass('loaded');});
It shouldn't produce any significant slow-down in the loading of the images, but it will allow all your page's DOM elements and javascript to run while those images are downloading if necessary.
(jsFiddle example)
I couldn't explain the answer myself. But I think this has the gist of what you need to do.
http://www.telerik.com/community/forums/aspnet/ajax/disable-or-gray-out-page-when-displaying-loading-panel.aspx
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!