I have such problem with images in Chrome:
when page is loading firstly text appears, than text is moving, and finally images appearing.
I will show in screenshots ( if someone wants I can give you a link to site )
Before images are loaded
after:
I have set sizes of images.
HTML:
<img alt="I_01" height="66" src="http://91.228.126.168:3000/images/i_01.png" width="73">
and CSS(as you can see I'm using Bootstrap ):
.second .span4 img {
padding-right: 10px;
float: left;
}
Questions: What I need to add to make them load properly ? What I should do to prevent images loading cause on performance ?
Hi now used to this image in background in your anchor link
as like this
Css
.textline{
display:inline-block;
text-decoration:none;
color:black;
vertical-align:top;
background:url('http://91.228.126.168:3000/images/i_01.png') no-repeat 0 0;
padding-left:80px;
line-height:70px;
}
HTml
link Text
Demo link
You need to preload images so that images are ready in cache before browser displays the images.
image preloading can be done in javascript. you may follow the link below for the same.....
http://www.learn-javascript-tutorial.com/ImagesWindowsandTimers.cfm#Preloading-Images
You can explicitly specify width an height for images, then text won't move even if image is not loaded yet. Browser will immediately display empty images of specified size, and then load images.
Related
Let's say we have requirement that icon image element need to present in HTML because we need to indicate icon existence for some screen readers and it's better to have them like IMG tag than I or plain DIV.
We have sprite.png and empty.png images. empty.png used for creating fake blank image (sprite image will be shown because it's background of our element).
In css we have class
.icon {
background:url('sprite.png') 0px 0px;
width:20px;
height:20px;
}
Then we use this in our HTML like this:
<img src="empty.png" class="icon" alt="Image from Sprite is Shown" />
Can we do it any other way, using our 'sprite.png' as image source with setting any mask/clip property on img with css?
Thanks in advance.
background-image does not take the 0px parameters you have after it. You may be mixing it up with background.
To show the correct portion of the sprite image, you use background-position to select the correct portion of the image.
Here is a simple tutorial page: http://www.tutorialrepublic.com/css-tutorial/css-sprites.php
I have a bunch of server-side generated images with the following HTML tags:
<img width="75" height="75" src="/MyController/MyAction/_ac=4d04359f-0d66-45d3-881c-b198e95a8215" data-idx="1">
The problem is that the images show the default "blank document" (or "missing image") icon and a border while they are loading. It looks like this:
After images are loaded, the icon of course disappears, and the broder gets set to the one I specified in my CSS.
I don't want to create fancy preloaders and what not, but I would like to make this "blank document" icon and the default border to go away. Although the user sees it for a less than a second, still that's not good because it creates an impression that something is wrong with my images.
How do I make that icon not to show up while images are being loaded?
One idea was to set background for images, but I cannot do that because images have transparent areas, and then some parts of the background will be visible after the image has been loaded.
UPDATE WITH A WORKAROUND
I noticed that if I do not specify width and height, the default missing icon and border is not shown while the image is loading. As a workaround I did the following:
<div class="imgholder"><img src="/MyController/MyAction/_ac=4d04359f-0d66-45d3-881c-b198e95a8215" data-idx="1"></div>
and style the image holder as follows:
.imgholder {
border: 2px solid #ddd;
margin: 2px;
padding: 2px;
width: 75px; /* fixed dimensions - should match image sizes to avoid cropping */
height: 75px;
overflow: hidden; /* never show scrollbar */
float: left;
}
Still, it would be great to have some way to style the loading image itself and get rid of that image holder <div>.
Does the broken icon show on every browser? Either way, have you tried this jquery plugin: Imagesloaded ? It may help in your case.
You can use alternate text property.
One question how you are loading images? Loading using async calls or loading these images while page loads?
$("img").on({load:function(){},
error:function(){
$(this).attr("src","blank.png")
});
I can't provide much info except that sometimes (maybe 1 in every 25 runs) an image that I call with CSS does not load properly. The image is there because if I hover my mouse over it it shows in certain places.
The HTML:
<div class="body-top"> blah </div>
The CSS:
.body-top {background:url(../images/top.gif) no-repeat; height:55px; width: 970px; margin:0; padding:0;}
It is running on Visual Studio's Development Server.
Any ideas?
edit: hovering over the image itself actually doesn't make anything appear, it's when i hover over a link that is on the image
It's hard to help without seeing the page, but.
Can you verify that none of the elements inside have a background colour?
Try adding this to test things:
.body-top *{background:none !important;}
Don't use this as final code, because the !important flag will stop any background working for elements inside .body-top
When I have an <a> tag set to a specific image background like this:
HTML:
Click Here
CSS:
a {
background: transparent url(button.png);
}
and I want the background to change whenever a user hovers over the spot, like this:
CSS:
a {
background: transparent url(button_HOVER.png);
}
The hover background image flickers (takes about 1-2 seconds until it fully loads) when a user hovers over the link.
I could save the file as GIF and minify its size and loading time, but that would harm my specific image tremendously (it's big and highly graphical).
That's why I was looking for a better solution, such as perhaps counting on the browsers ability to cache images. Hence would I apply a style to a button like this:
CSS:
a {
background: transparent url(button_HOVER.png);
background: transparent url(button.png);
}
So that the image button_HOVER is first cached. It has seemingly affected the "flickering", but not completely. I thought of maybe creating a hidden tag with the HOVER image, so that maybe the result would be different.
Do you think there's a better way to solve it? (I emphasize I want to keep the file as PNG, it weighs 6-7k). Is my method efficient?
Your solution would be to put both images (hover and active) in the same image file. Positioned on top of each other. Also known as Image Sprites. The browser will load the entire image file. On hover, you just change the background position.
Assuming the active image is at the top, and the hover image is positioned directly below that..your css code would be something like:
a.link {
width:70px;
height:24px;
background: url(image.png) top no-repeat;
}
a.link:hover {
background-position: bottom;
}
Notice background-position. Here I use top and bottom. You can specific exactly in pixels too. The entire image in this example would have a width of 70pixels and height of 48pixels. Some sites put all their small icons into one image. Loads altogether, save on requests too. :)
No need for preload scripts in this case.
The basic options available are to use an html element that's hidden from the viewer, or use javascript.
The html approach is probably the simplest, though:
<div id="preloadedImageContainer">
<img src="img/to/preload_1.png" />
<img src="img/to/preload_2.png" />
</div>
with the css:
#preloadedImageContainer {position: absolute; top: -1000px; left: -1000px; }
or, with javascript:
(function($) {
var cache = [];
// Arguments are image paths relative to the current page.
$.preLoadImages = function() {
var args_len = arguments.length;
for (var i = args_len; i--;) {
var cacheImage = document.createElement('img');
cacheImage.src = arguments[i];
cache.push(cacheImage);
}
}
})(jQuery)
the jQuery approach was lifted in its entirety from this page: http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript.
Though the best approach would probably be, as Lyon suggests, css image sprites.
You should search about this topic "preload images" You will find ways to preload images using css and javascript.
I believe that if you put a hidden image with source equal the src of png images you will use in the css files, this will make the images loaded when the page loads, and CSS work will be just switch preloaded images.
I have control in a page that gets html from text file and renders that html in webpage.
Right now it has to add image somewhere and reference that image src.
I was wondering if we can render image along with other html code, is it possible?
Yes, it is. You need a Data URI scheme:
<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />
The same can be done in CSS:
ul.checklist > li.complete { margin-left: 20px; background:
url('data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAA
ABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/5
8ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/A
FGGFyjOXZtQAAAAAElFTkSuQmCC') top left no-repeat; }
You can use inline SVG. See this article for mozilla and this one for IE.
You can also create images using CSS and different size characters and playing with z-indexes. Here's CSS Homer.
I've seen it done by creating a table with one cell for each pixel, setting the cell's background color to the pixel's color.