On one of my HTML pages there are some large images that are shown when I mouse hover over some links and it takes time to load those images.
I don't want to use JavaScript to preload images. Are there any good solutions?
HTML5 has a new way to do this, by link prefetching.
<link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />
Just add as many link tags as you need in your HTML and you are good to go. Of course, older browsers will not load the content this way.
Note
Above code will not work for Apple Safari safari does not support prefetch til now version 12 https://caniuse.com/#search=prefetch
UPDATE
If your server is served with HTTP2, you can also add a Link header in your response a made use of HTTP2 Server Push.
Link: <http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png>; rel=preload; as=image;
From http://snipplr.com/view/2122/css-image-preloader
A low-tech but useful technique that uses only CSS. After placing the css in your stylesheet, insert this just below the body tag of your page: Whenever the images are referenced throughout your pages they will now be loaded from cache.
#preloadedImages
{
width: 0px;
height: 0px;
display: inline;
background-image: url(path/to/image1.png);
background-image: url(path/to/image2.png);
background-image: url(path/to/image3.png);
background-image: url(path/to/image4.png);
background-image: url();
}
There is no need to preload images. I can't understand why 99% people thinks, that hover effects have to use 2 images. There is no such need, and using 2 images makes it look bad.
The only good solution I know is to use CSS for A elements (or easy JS for all other buttons). When button us hovered set background-position to some offset.
a { display:block; width:160px; height:26px; background:url(b_tagsdesc.png); }
a:hover { background-position:0 26px }
That's all, image used you can see below:
(source: margonem.pl)
Edit: You can also use it other way. Instead of toggling image, you can hide your image. So starting point would be "background-position:0 -100px" and on hover "0 0".
This technique is called CSS sprites - here is good description of it: http://css-tricks.com/css-sprites/
A technique I didn't see mentioned here yet, which works great if you don't need to worry about IE6 & 7, is to use the :after pseudo-selector to add your images as content to an element on the page. Code below lifted from this article:
body:after {
content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
display: none;
}
The only downside I can see to this compared to using JavaScript to preload the images is that there is no easy way to release them from memory.
You could use a hidden div to put images in. Like so
<html>
<body>
<div style="width:1px; height:1px; visibility:hidden; overflow:hidden">
<img src="img1.jpg" /><img src="img2.jpg" />
</div>
<div>Some html</div>
</body>
</html>
This only works for images though, ie. if you're trying to do the same for say .swf files there will be problems. Firefox doesn't run the .swf file if it's not visible.
<link rel="preload" as="image" href="..." />
This works best for me when we want to load image early for CSS
(while rel="prefetch" will cause duplicate loading from CSS)
Reference your images in invisible img tags. while page loading they will downloaded too.
As I'm not sure if hidden images are loaded, you'll probably want to use image sprites. Then the entire image is loaded before anything is displayed. You can even put all of your menu items in one image and therefore save a lot of HTTP requests.
If preloading images is what you seek, then performance is what you want. I doubt blocking up the page while the resources load is what you want. SO, just place some prefetching links at the end of the body and add the bogus media to them to make them appear unimportant (so that they get loaded after everything else). Then, add the onload tag to those links, and in that onload will be the code that sets the source of the actual resource in your page. For example, this could even be used in conjunction with dynamic iframes.
Before:
<a onclick="myFrame.style.opacity=1-myFrame.style.opacity;myFrame.src='http://jquery.com/'">
Click here to toggle it
</a><br />
<iframe id="myFrame" src="" style="opacity: 0"></iframe>
After:
<a onclick="myFrame.style.opacity=1-myFrame.style.opacity">
Click here to toggle it
</a><br />
<iframe id="myFrame" src="" style="opacity: 0"></iframe>
<link rel="prefetch" href="http://jquery.com/"
onload="myFrame.src=this.href" media="bogus" />
Notice how the first one (before) freezes up the page and blinks in a quite ugly manner while the second one (after) with the content preloaded doesn't freeze up the page or blink, rather it appears and disappears seamlessly instantly.
Can't you add them as an <img /> tag to your page and hide them using css?
Related
First time posting here, so treat me gently. :)
I have an SVG image on my site which has a transparent background -
<img class="img-responsive center-block" src="images/pritchservices.svg" alt="Pritch Services Logo" />
Works beautifully on my site. However, due to the transparency, when that image loads in google image search results, due to the transparency, looks terrible.
I have an alternative image (using for fb Open Graph crawler) which is here -
Pritch Services Full Logo
In my crazy mind, this is what I had as a plan:
Redo the SVG in Illustrator to include the background color (as per the fb OPen Graph image) - this would then mean the image result in Google would be as expected
Have some CSS within my site to set the background color of the SVG to transparent, so it displays nicely (as it currently does on the site)
I am assuming I can't just put the SVG markup inline, as although this would give me what I wanted on the page, it wouldn't load the image AT ALL on google image search results?
Is this the way to go, if so, any suggestions on how to implement please; or is there an alternative solution I haven't thought of? Or am I just being too picky?!
Thanks in advance everyone...
You can't include an SVG via <img> and style it with CSS in your parent document.
You can't style the contents of an <img>, even if it is an SVG
CSS doesn't apply across document boundaries
You have a few options.
Include the version with a background in your page. And then hide it and replace it with the transparent-background version via CSS.
<div class="logo">
<img src="logo-with-background.svg" ... />
</div>
.logo img {
display: none;
}
.logo {
background-image: url(logo-without-background.svg);
}
Include the background version using <object> then use the DOM to find the background element and hide it.
var object = document.getElementById("myObject");
var svgDoc = myObject.contentDocument;
svgDoc.getElementById("bg").setAttribute("display", "none");
Apply a clipping path to the backgrounded version as #Obink suggests. It would work, but it is not the easiest solution though. And it won't work on older browsers that don't support clip paths.
I'm being forced to use this browser called Fresco by ANT. In it's specs it says it can handle CSS1. So I'm trying to create a link that has an image, and when hovered over, have the image change.
I've tried:
<td width="30% valign="top" align="left">
<div id="changeImage"></div>
</td>
My CSS is as follows:
#changeImage{
background: url(somefilepath1);
width: 218px;
height: 52px;
}
#changeImage:hover{
background: url(somefilepath2);
}
It works fine in Chrome, Firefox, etc... But in this awkward browser called Fresco, it doesn't show the image at all. I'm not even sure if this is considered CSS1 approved? I've googled and found CSS1 stylings, but nothing to exactly define what I'm trying to do. Any web guru have any tips on this for me?
Sounds like it has trouble reading the psuedo :hover. Technically this was implemented in the early days to be used with only an anchor. I believe Internet Exploder 6 has :hover support only for anchor elements still. This soon has been changed to support all elements on a page.
I would say, try using a sprite sheet where the backgrounds are loaded already and changing the background position of this element. Which would be best practice to do anyways because, you will get instant action, instead of triggering a server request and having the user wait for the new content to arrive.
Here is more detail on the technique and CSS1 does support the background position element
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
I have a gallery in my website. The gallery contains 15 images, each one of them is approximately 500KB (total size is 7.5MB).
Because the gallery takes a while to load (25 seconds on my computer, tough it depends on the connection), I want the visitor to know the gallery is loading, hence the Ajax loading GIF.
I want the visitor to see the loading GIF as soon as he enters the gallery page, until the the gallery images have been downloaded and are ready to be viewed.
In order to achieve my goal, this is what I've done:
This is the beginning of the body of the gallery HTML page:
<body>
<img src="images/ajax-loader.gif" alt="" class="hiddenPic" />
<!-- loading Ajax loading GIF before all the other images -->
And this is the gallery CSS part:
#gallery {
background: url(images/ajax-loader.gif);
background-repeat:no-repeat;
background-attachment: fixed;
background-position: center;
So basically, the loading GIF should be downloaded as soon as a visitor enters the gallery page, because it is the first object inside the <body> that is going to be downloaded. However, it's not visible due to the hiddenPic class.
This method should help making the loading GIF ready and visible as the gallery background as soon as possible, until all the gallery images have been downloaded and the gallery is ready.
However, the loading GIF doesn't work properly on Google Chrome; it works perfect fine on Firefox & IE (spinning flawlessly) - but gets stuck (doesn't spin properly) on Chrome, from the moment it appears until the gallery is ready.
Update: I know I can implement a better gallery (like the ones suggested in the comments) which would require less resources from the user when entering the gallery page - but I don't understand how this can be the cause for the problem when the GIF loader works perfectly on Firefox & IE.
Why doesn't the Ajax loading GIF work properly on Chrome?
You just need to delete this declaration on line 602:
background-attachment: fixed;
I also had the same problem. The way I fixed it was to put the loading gif in it's own element (to keep markup clean, use a pseudo element).
Now, instead of using the background-attachment rule, you can use position: fixed. Here's the code you should use (assuming you'd like that loader gif to sit right in the middle of the screen):
#gallery:after {
content: "";
background: url(images/ajax-loader.gif);
position: fixed;
top: 50%;
left: 50%;
width: 50px; /*change to the width of your image*/
height: 50px; /*change to the height of your image*/
margin-left: -25px; /*Make this 1/2 the width of your image */
margin-top: -25px; /*Make this 1/2 the height of your image */
}
Hope this helps!
I'm a strong advocate of using dataURI with base64-encoded images in this and similar situations. What it does is effectively eliminates the need for a separate http request to retrieve the spinner gif, meaning the "loading" animation is immediately available to be rendered. This makes the value of the UX improvement so more valuable than a couple extra kilobytes in overhead - especially since the stylesheet would be only downloaded once and then cached by the client.
This fiddle has the animation embedded from ajaxload.info, having added literally less than 1KB to the final CSS.
Note that this kind of resource embedding is not supported at all on IE7 (but IE7 users have much bigger concerns to address :)
You may try this using jQuery BlockUI Plugin (v2)
Hope this helps.
Personally for loaders i've always done it this way , I do not remember where i read it .. But its always worked for me ..
$(function(){
$('#overlay')
.hide()
.ajaxStart(function() {
$(this).css("display","inline");
})
.ajaxStop(function() {
$(this).hide();
});
});
What it does , is it takes the div with an id of overlay and on any AJAX request that goes out , makes it visible and once the ajax request is complete , it hides it out.
Let me know if u need more code.
Cheers.
In the CSS for #gallery
background-position: center;
Should be
background-position: center center;
You should also try to use jQuery. See http://yulounge.alienworkers.com/photogallery/ for an example.
I'm trying to use CSS sprites to reduce the number of HTTP requests on page. I want the these images to render without borders.
As best I can tell I have configured the CSS correctly, yet I am experiencing the render issues below (note: The Google logo is intentionally clipped):
As you can see, all the browsers still render a border. Also, IE and FireFox render 'broken link' type icons as well.
The HTML used in this example is:
<html>
<head>
<style>
img {border:none}
img.css_sprite { background:url("http://www.google.com/images/nav_logo29.png") -20px -10px; height:24px; width:100px; border:none;}
</style>
</head>
<body>
<img class="css_sprite"/>
</body>
</html>
Can anyone tell me what I'm doing wrong here? I'm sure it must be something simple. Thanks in advance.
The border belongs to this:
<img class="css_sprite"/>
It's a border drawn by the browsers due to a missing image. Here you don't specify any src so the browsers add the border and missing image graphic instead.
Change the img to some other element instead like div or span instead.
I found an excellent solution just put a blank transparent image (preferably 1x1 png) within the src elements...:) as the image is transparent it will not visible at all src does not go blank and your purpose is solved...
How do I get IE6 to display inline base64 encoded images?
<img src="data:image/png;base64,....." />
This works in Firefox/Chrome/Safari but not IE6.
My solution run smoothly on IE6. It may help you!
<!--
Content-Type: multipart/related; boundary="=_data-uri"
-->
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#pic {
width:670px;height:710px;
background-image: expression("url(mhtml:" + window.location + "!locoloco)");
}
</style>
</head>
<body>
<div id="pic" ></div>
<div id=test style="display: none;">
--=_data-uri
Content-Location:locoloco
Content-Transfer-Encoding:base64
iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8 /w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
--=_data-uri--
</div>
</body>
</html>
Install Google's Chrome Frame?
Seriously, you can't. IE6 does not have support for base64 inline images.
IE6 needs an expression to correctly interpret base 64 encoded images. Dean Edwards describes the solution here: http://dean.edwards.name/weblog/2005/06/base64-sexy/
Note: this is a very ugly hack. In the first place we were putting image code in our CSS; with this solution you need to either put presentational data in Javascript, or behavioural data in your CSS. Nasty but necessary.
base64 images are showing up in IE6 and IE7... in the last i found a simple solution when you are using a encoded images in css.
"write two attributes in a same class. Use css browser specific hacks"
I am going to explain it below.
<div class="myClass"> </div>
<style>
.myClass{
background=url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAHCAYAAADam2dgAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAySURBVHjaYlSdd/4/AwQwQml0PgMTHsn/yIoYCCmEKcKrEFkRTrcxEVIAs46g7wACDACraA+g90OOjwAAAABJRU5ErkJggg%3D%3D');
/* Above property will work for all browsers*/
*background=url('give real path_to_image');
/* This will work only for ie6 and ie7 */
}
</style>
If this isn't for a corporate setting, I'd say just drop IE6 support all together, and have people install Chrome Frame if they insist on using such an outdated browser.
You can use base64 in CSS, at least.
Please take a look: http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/
Perhaps more research could possible help using mhtml:// for inline images, too.
This could be a quick fix to make Base64 images showing up in IE6 again:
Base64 image fix for Internet Explorer
*Sorry for the broken link, now comes the correct one!
I think this is a non-intrusive way to make things working again. It actually repair the images after you have those broken images (broken icon) already displayed on IE.
ORGINAL
I do not believe IE6 supports in-line data for the <img/> tag. However, you might want to try another format like GIF or JPG.
EDIT
Given the fact that it took IE forever to accurately support PNG (still debatable) one could easily deduce that PNG might not be supported as an in-line data format for <img/> tags. With that said, goto **ORIGINAL**