I'm running a function on every keyboard keyup to monitor a text field.
Depending on the input, I am using jquery to .removeClass("classwithBGImage").addClass("classwithnewBGimage")
This is working nicely, expect on the first load there is a flicker in the background image.
I have tried preloading the images with Javascript and CSS, even tried using a sprite - but there is always a flicker on the first load when .removeClass("classwithBGImage").addClass("classwithnewBGimage") is triggered.
Update:
Seems to be a documented chrome bug:
http://code.google.com/p/chromium/issues/detail?id=102706
As witnessed in this jsfiddle: http://jsfiddle.net/QpvUQ/2/
Any ideas? Much appreciated.
Apply the background-image to a div positioned absolutely and left:-99999px.
#preload{
background-image : url(large-image.png);
position:absolute;
left:-99999px;
}
Later, use it for the actual div
.classwithnewBGimage{
background-image : url(large-image.png);
}
This is one of the hacks that I am aware of for pre-loading images so that they don't take time when you actually use them.
Also, .removeClass() without arguments does nothing. To avoid flickers use smooth transitioning.
.stylesWithoutImage{
///
}
.classwithnewBGimage{
//img
}
Using Move.js you can Animate CSS Changes.
move('.box')
.set('background-image', 'url(img)')
.end();
PS : Not tried but it say's you can animate CSS with it.
I did an implementation with only CSS to do the same than your jsfiddle.
How it works?
.class {
background: url(...);
}
.class:hover {
background: url(...);
}
I left the JS code if you need to do it with Javascript, but with only CSS should be enought.
http://jsfiddle.net/QpvUQ/7/
I've figured out the problem in case anyone else runs into the same issue.
With preloading, the images are preloaded but many browsers still receive a 304 response for the image causing a flicker on first load. You can force the browser to cache images in the case with rails applications.
Enable image caching in development mode in Rails 3.1
Related
I know this was asked before, but my situation is somewhat... weird. I am building an iframe for later use in a slideshow element on the website.
I have a long content-adaptive flexbox that goes way beyond the screen and I want to use the css trick of
left:50%;
transform:translateX(-50%);
To horizontally center the currently viewed area of the page, so when you resize the window, the middle of currently viewed element, will still remain horizontally in the middle of the screen.
As my flexbox is content-adaptive it's like 5K px long so I obviously can't use css %. So I went to jQuery and used $(window).width() to determine current viewport size and adjust the elements with .css({}) method. Here is the jQuery code:
$(document).ready(function(){
$(window).resize(function(){
var winWidthHalf = ($(window).width())/2;
$("#ss_home").css({
"left":"-"+winWidthHalf+"px",
"-webkit-transform":"translateX("+winWidthHalf+"px)"
});
});
});
And here's the puzzle: it worked. And then I restarted the PC and it didn't work since. Whatever I did didn't seem to help. Can you help? I have NO idea what could have happened...
Here is the page preview, please don't mind other comments in the code, they are irrelevant for now: http://users.metropolia.fi/~staniss/test/slideshow/
All content is just sample.
I would also love to know how to group the $(document).ready and $(window).resize properly, since I execute the same code, but don't wanna copy paste it twice just to change the events, since that's a bad practice. I haven't been able to find the right syntax for this.
Also sorry, the sample is for chrome only, it's very early in dev so I didn't bother with compatibility yet.
It was a browser vendor extension issue (had to add -webkit- prefix to transform) :P.
We are having some problems finding the source of background images not loading. As far as we know there have been no troubles with them loading prior to implementing eu cookie javascript function.
jsFiddle: (just the JS) http://jsfiddle.net/dx4MC/
For some reason, on occasions we cannot replicate (appears to be random) all background-images on a page will fail to load. Has anyone come across this before?
A possible thought was the js wasnt allowing the CSS to load fully, however no other styles have been affected, only the background images.
try using
!important
in your css to override the javascript inline styling
I'm using the Backstretch Plugin to load some full screen images. Everything works fine, but I'd like it to show the image loading (as it would by default) rather than wait with a blank screen until it completely loads. Is this possible? I'm not a JS expert by the way.
Thanks.
The Backstretch plugin is written to apply a set of catch-all DOM properties to stretch the image which are all fired on image load:
img = $("<img />")....bind("load", function(e) {
...
You would have to hack the plug-in to change this behaviour.
In any case, images and pages are displayed differently by different browsers during load, so I'm not sure exactly which behaviour you're after. One alternative is to use a highly compressed image in the background and replace it after the rest of the page has loaded. Or just optimized the image so the load time is acceptable.
I am using jQuery animate to slide in items on a web page. For some reason, only in webkit browsers, there is a trail of artifacts across the space the element was animated over. Is there a way to stop this from happening or hide it?
They are seen on the carousel once you load the page here: http://www.mywebclass.org/~jeff/
In your animate callback, scroll down 1px then back up 1px:
$(this).addClass('active');
scrollTo(document.body.scrollLeft, document.body.scrollTop + 1);
scrollTo(document.body.scrollLeft, document.body.scrollTop - 1);
On this machine here, I can't see any trails, but i know the effect you're talking about.
It's not directly a solution, but I seem to remember that animating the left-property is very resource-heavy on slower systems. It would probably lead to an overall more smooth experience if you would work with a <div> where overflow:hidden; is set and one larger slide, that you move by animating scrollLeft() instead of these animations.
There was a post on jQuery for Designers about that, i'll update once i've found it.
Update: "jQuery for Designers - Fun with Overflows"
I only see the leftovers of the animation in the H1 which I think is caused by using a non standard font.
It's not a solution but if you can't prevent it, you can remove those little bastards by just scrolling the webpage 1 pixel up or down.
You're also using an outdated version of jQuery (1.3 instead of 1.6.2), is there a reason for this? If not, you should use the latest version
Trails on the left side of #font-face text animated using the left property in Chrome & Safari. I found that using some padding left on the text and adjusting the animation to accomodate fixed the problem.
I have a site housing a good deal of image thumbnails (currently ~500) on the homepage. Each image is small, about 200px by 150px (but have different aspect ratios). Also small in file size (each is about 10-20k).
I have two buttons to adjust the visible size of the thumbnails (large:200px height and small:100px height).
I decided to use the jQuery .animate function with 0 seconds for the animation to adjust this and keep the ratio of each image:
$('#small_thumbnails').click(function(){
$('.thumbnail').animate({height: '100'}, 0);
return false;
});
This for some reason is causing browsers to become unresponsive and crashes the page. Is it due to the large number of images? I was going to implement lazyload to cut down on the images on the page but lazyload is no longer supported. I could also just write NEW js to do this but am confused as to why the animate function is not capable.
Here is the dev site that has the issue:
http://selfportraitproject.com/dev/
Any help would be greatly appreciated.
Have you tried to use height: '100px' ? That would be the correct syntax, although i don't know why this would crash the browser.
Also calling .animate with a duration of 0 is the same as just setting the css, so just use .css instead, it will perform a lot better.