How can I force the download of unused CSS images? - javascript

This is kind of a continuation of a QUESTION I ASKED YESTERDAY and an off-shoot of THIS QUESTION.
Basically, I am using jquery to change css background images on page scroll, however on first visit, when the background changes on scroll it only starts loading then and there making for a poor user experience.
I am using cache headers so that this only happens once, but still it would be nice if it didn't happen at all.
How can I load the second CSS image before the page scrolls to make the transition seamless?
I am only trying to load this one image in the background, not preload all images on the page before display or anything...
Current code I am using...
jquery
jQuery(window).scroll(function(){
var fromTopPx = 200; // distance to trigger
var scrolledFromtop = jQuery(window).scrollTop();
if(scrolledFromtop > fromTopPx){
jQuery('html').addClass('scrolled');
}else{
jQuery('html').removeClass('scrolled');
}
});
css
html {
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
html {
background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg);
}
html.scrolled {
background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals_2.jpg);
}
DEMO - Scroll to see in action.

Few options here:
Add a hidden element and add your image as a background; the browser will load it and is smart enough to know that it doesn't need to reload
What I would consider the cleaner way: load your second image behind the first one:
html {
background-image: url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg),
url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals_2.jpg);
}
html.scrolled {
background-image:url(http://robt.info/wp-content/uploads/2013/06/funny-kids-comic-animals.jpg);
}

On the left side add all your images and make all of them positioned absolutely
img{
position :absolute;
z-index:1;
}
So all images will be loaded on windows load. And just change their z-index according to scroll.

One more option is there is to make ur images in a single sprite and display them by changing position..in this way u will save 1 extra http call itself. U can create image sprite with http://spritegen.website-performance.org/

Related

How to resize an image depending on div height and position selected of a cover photo?

I have a cover profile photo that can be changed in my web app like facebook cover profile photo. I have implemented the function of repositioning the photo with jquery UIdraggable plugin and the upload new photo function is implemented too.
for the repositioning this is how I proceeded:
add a hidden input field on the form and save the latest top value
when loading the page the top value is set to the saved value on the database.
for example this is a case on my PC screen with a top set to top: -166px;
and this what I have on the mobile view :
every thing is working fine on my PC screen. the problem is that on small devices it's not the same position of the photo that I have repositionned rather there are some problems with dragging the photo on some small devices .
Do somebody have anidea how to correct this ?
Or Is there any other plugin that do this thing ?
Thanks in advance .
I advice you to use CSS instead of JS. You can set image as background-image
property and config it with background-size property
Use this simple background property
background: url("images/image-name.jpg")no-repeat center;
background-size: cover;
You could do this instead of background.
img {
height: 200px; //your preferred height
object-fit: cover;
object-position: center;
width: 100%;
}

Full page size background image

I have a background image for my html page. I set it through css style:-
html{
margin-top:10px;
background: url(xxxxx.jpg) no-repeat center center fixed;
background-size: cover;
}
I want to know how I can change it dynamically it from the Javascript side.
I have tried something like:
document.getElementById("html").style.backgroundImage = "url('yyy.jpg')";
but that doesn't change the image.
Without using jQuery, how can I access the html element and change its bkImage, say every 5 seconds to make it like a slideshow. (I will be storing my image urls in an array).
The background image is not really tied to the html tag but the body tag.
Try:
body
{
background-image: url(xxxxx.jpg);
}
And the script:
document.getElementsByTagName("BODY")[0].style.backgroundImage = "url('zzzzz.jpg')";
If this works as expected (you see zzzzz.jpg, not xxxxx.jpg) then you're ready to fix the rest of the CSS code.
EDIT: tested the code and fixed a bug. You must assign backgroundImage = "url('zzzzz.jpg')", not simply the filename as I've written before.
As an example, this works perfectly, all you need are two images (red.jpg and blue.jpg):
<html>
<head>
<style>
body
{
background-image: url('red.jpg');
}
</style>
</head>
<body>
<script>
document.getElementsByTagName("BODY")[0].style.backgroundImage = "url('blue.jpg')";
</script>
</body>
</html>
EDIT 2:
The rest of the CSS must not change, so you'll still have:
body
{
margin-top: 10px;
background: url('xxxxx.jpg') no-repeat center center fixed;
background-size: cover;
}
The background property is a compound:
background: url('xxxxx.jpg') no-repeat center center fixed;
^ ^ ^ ^
URL R H V
URL: the image url
R: repetition
H: horizontal alignment
V: vertical alignment
With
background-image: url('xxxxx.jpg')
you just change the URL part of the above compound, leaving the rest as it was.
If an image is too small it might be stretched to cover the whole screen.
So for a good slide show be sure that all images have the same size.
To access the html element you can use document.documentElement:
document.documentElement.style.backgroundImage = "url('yyy.jpg')";
To change it every X seconds you can use setInterval() and have your images in an array.

Half page background / Column background

I'm running this JavaScript and CSS (jsfiddle) on this website (animevid-other) so what I need is to adapt the JavaScript and CSS to the column_sx or have the background centered on the left (where there's the column), is this possible?
I've found something that could have helped but I think it's not exactly what I need (multiple-backgrounds-left-half-and-right-half). So since I have not so much knowledge of JavaScript and just a few things about CSS, could you help me?
Edit : more details here http://i.imgur.com/DsF4q3M.png
You should set the background to colonna_sx instead of body. So add this to colonna_sx.
background-repeat: no-repeat;
background-position: center;
background-size: cover;
Then you should change the script. If you add jQuery you can change this.
document.body.background ='http://adventureofucm.com/OtherSites/image_background/'+num+'.jpg';
to this.
var backgroundpic = 'http://adventureofucm.com/OtherSites/image_background/'+num+'.jpg';
$('.colonna_sx').css("background", "url(backgroundpic)");
Without jQuery.
document.querySelector('div.colonna_sx').style.backgroundImage = 'url(http://adventureofucm.com/OtherSites/image_background/' + num + '.jpg)';
This should work in most browsers (IE8 and up) http://caniuse.com/#feat=queryselector.

Random Background on Refresh Flicker (Tumblr)

I've been trying to get a working 'random background on refresh' on my Tumblr theme. For those that don't know, Tumblr themes are made up of HTML with embedded CSS and JavaScript.
Right now , I'm using this script:
<script type="text/javascript">
var bg1 = 'http://i.imgur.com/image1.jpg';
var bg2 = 'http://i.imgur.com/image2.jpg';
var bg3 = 'http://i.imgur.com/image3.jpg';
var bg4 = 'http://i.imgur.com/image4.jpg';
var bg5 = 'http://i.imgur.com/image5.jpg';
var randBG=[bg1,bg2,bg3,bg4,bg5];
window.onload=function() {
num=Math.floor(Math.random()*randBG.length);
document.body.style.background='url('+randBG[num]+') no-repeat center center fixed';
</script>
It works, but it causes screen flicker and nullifies my "background-size:cover" property. I've tried image preloading, with no success. Tumblr doesn't support php, and I don't have a way of hosting a php file to link to.
So, two things. How can I randomize backgrounds on refresh without screen flicker, and, in the process, maintain the following CSS properties?
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
First of all, the flickering is depending on the pre-fetch and the size of the background image. So if the background image is HUGE it's not going to be ready at the same time as the document. Secondly, calling this on load event means you're waiting until everything is loaded on the screen before loading the background and therefore, you're upping the delay. Thirdly, like I said in my comment, you're blowing away your background-size within your Javascript so you need to do it differently.
Here's what I did.
CSS Snippet
<style>
...
body {
background: url('') no-repeat center center fixed;
-moz-background-size: cover;
background-size: cover;
}
...
</style>
Javascript
<script type="text/javascript">
$(document).ready(function(){
var bg1 = 'http://i.imgur.com/enkkn.jpg';
var bg2 = 'http://i.imgur.com/BZBke.jpg';
var bg3 = 'http://i.imgur.com/QOvQH.jpg';
var bgs = [bg1, bg2, bg3];
var num = Math.floor(Math.random() * bgs.length);
var bg = new Image();
bg.src = bgs[num];
$(bg).load(function(){
document.body.style.backgroundImage = "url(" + this.src + ")";
});
});
</script>
Note: These background images are actually huge and I don't recommend using something that big. Keep them compressed and small so they load faster.
I used jQuery since it has the ability to run something as soon as the $(document).ready event fires, which means it fires as soon as the document is ready in the background. I also wait until the image is actually loaded for use and only then do I back it the background image. I don't believe you'll be able to completely eliminate the flickering, but I think this will help.

CSS: Making Background Image fade slowly

I am working on a legacy code here, and cannot use jQuery, CSS3 or HTML5.
I am using a background image for an input field in HTML. I am trying to achieve some sort of animation here, where the image appears initially and fades away slowly after 'n' seconds.
The sample CSS code that I have is:
.acceptValue {
background-image: url('../../images/accept.gif');
background-repeat: no-repeat;
background-position: right;
padding-right: 20px;
}
I want the above CSS property to be applied for 'n' seconds and then it should disappear.
Is there a way I can get this working in IE7 and IE8? I want something like SetTimeout in CSS definition where the image (accept.gif) appears just for a few seconds.
Please let me know.

Categories

Resources