Image flickering when inserted into the DOM - javascript

I noticed that when I do something like this (with jQuery, but I don't think it matters):
$("#myDiv").html("<img src='/image.png'/> this is my image.");
The browser displays the text first, and then the image is loaded, and shifts the text to the right which creates a horrible flickering effect.
The image doesn't appear to be cached by the browser. Any idea why ? How can I avoid this phenomena when loading images into the DOM ?

How can I avoid this phenomena when loading images into the DOM ? there are two major methods (may be more :))
1) Set the actual size of the img <img with='20' height='20' src='...' /> or via CSS style.
2) Use image preload and insert your code only when image is loaded
var img = new Image();
$(img).load(function(){
$("#myDiv").append($(this))
.append(document.createTextNode("this is my image.");
  // or your way, browser should take image from cache
  $("#myDiv").append("<img src='/image.png'/> this is my image.");
}).attr('src', '/image.png');
ps: there is a serious bag in SO engine - code formatting does not want to combine with numbered listing. So I removed the list.

Preload the image before attaching it:
$("<img>", {
load: function() {
$("#myDiv").empty().append( this, "this is my image." );
},
src: "/image.png"
});

preload your images like this
var images = [
'/path/to/some/image1.png',
'/path/to/some/image2.png'
];
$(images).each(function() {
var image = $('<img />').attr('src', this);
});

Images may render a little slower that text, even if cached. If you know the dimensions of the image add height and width attributes to the image and then it won't jump around.

Related

Issue with high resolution images in chrome(windows) loading from javascript

I am having a problem with a site. My problem is I am loading several images progressively - starting with a small resolution image for fast loading I am then ajaxing a bigger image in (normally the original size that a user uploads).
The code below works perfectly. HOWEVER when done on chrome on windows. if the bigger image is a really high res (lets say 4400 x 4000). The screen would go white and the image would disappear. The white bursts out of the container (which has overflow:hidden) on it and covers the screen. Only the elements with a higher z-index over the image displays.
If I inspect the element that is white. It shows that it is the element, and the image is loaded - the URL is fine and if I click the image to open in another tab it loads fine.
Does anyone have any idea why this is happening?
if(href){
var img = document.createElement('img');
img.className = 'openLBFullView hidden';
img.onload = function(){
loadBiggerImg(this);
};
$(img).data('url',$currentImg.data('url'));
img.src = href;
img.id = 'my-image';
}
var loadBiggerImg = function(img){
var originalImg = $('#my-image');
//append the img to the document
originalImg.before(img);
// append original styles and classes to new image
$(img).attr('style',originalImg.attr('style'));
$(img).attr('class',originalImg.attr('class'));
// fix for windows IE adding attributes
$(img).removeAttr('width').removeAttr('height');
//fade in new image over the top and remove old one
$(img).fadeIn(200,function(){
originalImg.remove();
});
}
One of the possible solutions - large images dont render in chrome
This not neccesarily will fix your issue though - I'd try using lowres jpegs scaled to highres and preload big one - once loaded fade lowres one and show the big one (in a way fake the progressive JPEG) - Hope that helps man.

Start gif animation not until it's completely loaded

I have a large gif animation on a web page and want to start it not until it's completely finished loading. How would that be possible using JavaScript / jQuery?
Use a placeholder image, and replace it with the animated GIF once that GIF is fully loaded:
<img id="anim" src="placeholder.gif">
JS:
var myanim = new Image();
myanim.src = '/img/actions.png';
myanim.onload = function() {
document.getElementById('anim').src = myanim.src;
}​
http://jsfiddle.net/mblase75/6XTg7/
You can hide GIFs with CSS (or JS replacing them with a placeholder) and when GIFs are loaded you can fire show()
$('img[src$=".gif"]').load(function(){$(this).show())
You could hide it until it is fully loaded.
<!--- this uses jquery !-->
<script type="text/javascript">
var image_url = "http://media.tumblr.com/tumblr_m4doax3R071r9c1z7.gif";
var image = $('<img />').load(function(){
$(this).show();
}).attr('src', image_url).hide();
$('body').append(image);
</script>
The issue here is that once the image has been downloaded (i.e it is in the browsers cache), there really doesn't seem to be any way of starting it from a particular frame.
You have no control over gif animation through javascript, so you have to implement some sort of a hack. You have to make it hidden in the beginning. Instead of the actual picture you can put a div with the dimensions of the actual picture and with text like "wait".
When the image is downloaded in the browser you can substitute div with an image. And at that point of time animation will start

mouseover.js load grayscale image

I have a problem with a mouseover script. Everything works as it should but I have a small issue that I don't know how to solve. More precisely, the mouseover script creates a grayscale image hover effect. When the page loads the colored images are showing for a short time (1 second or less) and then the javascript is applied and they are all grayed out which is exactly how things should work.
How can I make it so that the colored images will not appear before the javascript is applied? Basically, I want the grayscale images to appear when the page loads not after. Is it possible?
You can see the script here and the webpage in question here.
I would remove the images from the HTML and load them dynamically.
I would use <a class="placeholder" href=""></a> as placeholders for the <img src="" /> and would style the links to either be hidden or go well with the design.
$('a.placeholder').each(function() {
var src = $(this).attr('href');
var image = new Image(); // this is not yet visible in the DOM.
image.onload = grayscale; // change the grayscale function to accept
// event parameters
image.src = src; // this triggers the onload event which
// grayscales the image
var dom_image = $('<img />').attr('src', src);
$(this).replaceWith(dom_image);
});
Of course you have to be doing the above on document ready not on window load.

The image's dimension is different from when it's loading and after it loads

I have a page that loads a lot of fairly large images (about 200 of 100Kb images [about 600 x 400 px]).
What I'm trying to do is manipulate the photo if it's in portrait, as opposed to landscape.
The problem I'm experiencing is that when i use javascript to grab a portrait photo's properties when it's loading, the height is significantly lower than what it should be, and the width is bigger than it should be. Specifically, a 75 x 100 image was considered as a 100 x 16. So when the function runs through this image, the image is considered landscape, not portrait, and skips over.
I had hard time identifying the problem, because the property shows it as a 75 x 100px image after it's done loading.
Is there a way to get around this problem? or run the function after all the images have loaded?
Run the function after it has loaded, You'd do it like this:
Using the DOM exclusively
var newImg = document.createElement('img');
newImg.src = "theImage.png";
newImg.alt = "Always specify an alternate text for accessibility, even if left blank";
newImg.onload = function () {
//Image manipulation
};
galleryNode.appendChild(newImg); //Replace galleryNode with the parent element of your image.
Using innerHTML
galleryNode.innerHTML += "<img src='theImage.png' alt='' id='newImage1'/>";
var newImg = document.getElementById('newImage1');
newImg.onload = function () {
//Image manipulation
};
Using jQuery
$('.gallery img').live('load',function () {
//Image manipulation
});
Its always a good idea to run javascript after the page elements have finished loading. I usually do this in jQuery, like this:
$(function(){
//code to run after load goes here
});
Otherwise, you can try modifying the body tag and giving it an onload attribute, like:
<body onload="myFunction();" >

how can l get the image size, before it loads into html?

At first image height is coming as zero, after that by refreshing the page i am getting its actual height. I need to get its height at first time? could any body helps me?
$j(document).ready(function(){
var imgV = new Image();
imgV.src="http://www.kerrvilletexascvb.com/Riverside%20Nature%20Center3.JPG";
$j("#imgD").html(imgV.height);
alert(imgV.height);
});
<div id="imgD"></div>
<img src="http://www.kerrvilletexascvb.com/Riverside%20Nature%20Center3.JPG" />
You don't have to insert an image into the DOM to get its dimensions:
$("<img />")
.attr("src", "http://www.google.com/intl/en_ALL/images/logo.gif")
.load(function() {
alert(this.width);
alert(this.height);
})
;
The image size is only available when the image is loaded. Likely when you reload the page, the image is instantly served from cache, so its size is instantly available.
If for whatever reason you need to get the size before you display an image, you can display it off-screen to begin with. Add an onload handler to it that will get called when the image is ready - you can then inspect it's size, and attach it where needed.
By displaying off-screen, I mean stick it into a 1x1 pixel div with overflow: hidden style, somewhere on the bottom of the page.

Categories