I have created a simple photo gallery viewer, and I would like to preload the images in the background, and then run a function when they are done.
My question is, how do I do that?
var image = new Image();
image.src = "http://foo.com/myimage.jpg";
//if you have a div on the page that's waiting for this image...
var div = getElementById("imageWrapperDiv");
//you can set it on the image object as the item to draw into...
image.myDiv = div;
image.onload = function(){
//do whatever you're going to do to display the image
//so in this example, because I have set this objects myDiv property to a div on the page
// I can then just populate that div with an img tag.
//it's not the most elegant solution, but you get the idea and can improve upon it easily
this.myDiv.innerHTML = "<img src='" + this.src +"'>";
}
Once the image loads, it's in the browser's cache, so, if you use the src property you can draw it anywhere on the page and it will display instantly.
To preload an image use the <link> tag and add preload to the rel-attribute:
<link rel=preload href=path/to/the/image.jpg as=image>
Alternatively in Javascript:
var preImg = document.createElement('link')
preImg.href = 'path/to/image.jpg'
preImg.rel = 'preload'
preImg.as = 'image'
document.head.appendChild(preImg)
The preload value of the element's rel attribute allows you to
write declarative fetch requests in your HTML , specifying
resources that your pages will need very soon after loading, which you
therefore want to start preloading early in the lifecycle of a page
load, before the browser's main rendering machinery kicks in. This
ensures that they are made available earlier and are less likely to
block the page's first render, leading to performance improvements.
Documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
I like this CSS method versus the typical Javascript function:
Place this in your CSS file:
div#preload { display: none; }
Place this at the bottom of your HTML document:
<div id="preload">
<img src="http://domain.tld/image-01.png" width="1" height="1" alt="Image 01" />
<img src="http://domain.tld/image-02.png" width="1" height="1" alt="Image 02" />
<img src="http://domain.tld/image-03.png" width="1" height="1" alt="Image 03" />
</div>
This method ensures that your images are preloaded and available for use elsewhere in the document. Just remember to use the same path as the the preloaded images.
http://perishablepress.com/pure-css-better-image-preloading-without-javascript/
Related
This may be a dumb question, but I've a real confusion and want to get an opinion from somebody who knows this in-out.
Preloading images can be done either via JavaScript or CSS (to name two which I'm considering). I read the tutorials that if the browser finds the same image path again, it would render the cached image.
If I preload images like:
<img src="../images/bg.jpg" alt="background" width="1" height="1" style='display:none' />
and
<img src="images/bg.jpg" alt="background" />
Similar with javascript:
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
});
}
// Usage:
preload([
'../img/imageName.jpg',
'img/imageName.jpg' // case when using this script in a different hierarchical level)
]);
Will the second call result into rendering of the image from the cached version or it will not work because the image path specified is different (though ultimately it refers to the same file).
Thanks in advance.
I realise this is and old one but I get this one all the time from interns - so here goes...
Even though the onload function is in the JS file asking/telling the browser to look for the image; it is the browser looking for the image and is telling the JS that the image/s loaded.
So your image path in the JS should be the same as how you would enter it in the HTML.
PS: I noticed in your HTML the image folder is "/images" and in your JS the folder is "/img"
I have the following script which take a string with html information (containing also reference to images).
When I create a DOM element the content for the image is being downloaded by the browser. I would like to know if it is possible to stop this Beauvoir and temporary prevent loading.
I am targeting web-kit and presto browsers.
relativeToAbosluteImgUrls: function(html, absoluteUrl) {
var tempDom = document.createElement('div');
debugger
tempDom.innerHTML = html;
var imgs = tempDom.getElementsByTagName('img'), i = imgs.length;
while (i--) {
var srcRel = imgs[i].getAttribute('src');
imgs[i].setAttribute('src', absoluteUrl + srcRel);
}
return tempDom.innerHTML;
},
Store the src path into an HTML5 data-* attribute such as data-src. Without src being set, the browser will not download any images. When you are ready to download the image, simply get the URL from the data-src attribute and set it as the src attribute
$(function() {
// Only modify the images that have 'data-src' attribute
$('img[data-src]').each(function(){
var src = $(this).data('src');
// modify src however you need to, maybe make
// a function called 'getAbsoluteUrl'
$(this).prop('src', src);
});
});
The approach taken by popular image library, Slimmage, is to wrap your img tags in noscript tags:
<noscript class="img">
<img src="my-image.jpeg" />
</noscript>
Web scrapers and people with JS turned off will see the image as if the noscript wasn't there but other browsers will completely ignore the noscript and img tags.
You can then use JavaScript to do whatever you want with it, for example (using jQuery):
$('noscript.img').replaceWith(function(){
return $(this.innerText).removeAttr('src');
});
I think you should reverse the logic, don't load the images by default and at the moment the image is needed, update it's src attribute to tell browser to start loading.
Or even better way would be to use some jquery lazy image loading plugin like this one:
http://www.appelsiini.net/projects/lazyload
Hope this helps.
To prevent images from being show, you could use this.
$(window).loaded( function() {
$("img").removeAttr("src");
});
It might be tricky and give unexpected results, but it does it.
I have a very complex page with a lot of scripts and a rather long loading time. On top of that page I want to implement the jquery Nivo Slider (http://nivo.dev7studios.com/).
In the documentation it says I have to list all images for the slider inside of a div#slider
<div id="slider">
<img src="images/slide1.jpg" alt="" />
<img src="images/slide2.jpg" alt="" title="#htmlcaption" />
<img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
<img src="images/slide4.jpg" alt="" />
</div>
However I might have 10 images with a 1000x400px which is quite big. Those images would load when the page loads. Since they are in my header this might take quite a while.
I looking for a way to use any jquery Slider Plugin (like the nivo slider) but either dynamically load images or load all those images after everything else on my page has loaded.
Any idea how I could solve that?
Is there even a way to start a javascript process after everything else on the page has loaded? If there is a way I might have an solution for my problem (using the jquery ajax load() method) ... However I have no idea how to wait for everything else to load and then start the slider with all the images.
Here's what we did and its working great. We skipped setting src attribute of img and added img-location to a fake attribute lsrc. Then we load a dynamic image with lsrc value, and set the src of actual image only after its loaded.
Its not about faster loading, but its about showing the images only when its downloaded completely on your page, so that user do not have to see that annoying half-loaded images. A placeholder-image can be used while the actual images are being loaded.
Here's the code.
$(function(){
$.each(document.images, function(){
var this_image = this;
var src = $(this_image).attr('src') || '' ;
if(!src.length > 0){
//this_image.src = options.loading; // show loading
var lsrc = $(this_image).attr('lsrc') || '' ;
if(lsrc.length > 0){
var img = new Image();
img.src = lsrc;
$(img).load(function() {
this_image.src = this.src;
});
}
}
});
});
Edit: Trick is to set the src attribute only when that source is loaded in temporary img. $(img).load(fn); handles that.
In addition to Xhalent's answer, use the .append() function in jQuery to add them to the DOM:
Your HTML would just have:
<div id="slider">
</div>
And then your jquery would be:
jQuery(function(){
$("#slider").append('<img src="images/slide1.jpg" alt="" />');
});
check out jquery load() event, it waits for everything including graphics
$(window).load(function () {
// run code
});
on load you could then load the images using:
var image = new Image();
image.src = "/path/to/huge/file.jpg";
You can add a function onload to the image too
image.onload = function() {
...
}
I am using the below to power my slider and improve the page load performance.
for (var i = document.images.length - 1; i >= 0; i--) {
var this_image = document.images[i];
var src = $(this_image).attr('src') || '' ;
if(!src.length > 0){
var lsrc = $(this_image).attr('lsrc') || '' ;
if(lsrc.length > 0){
$(this_image).attr("src",lsrc);
}
}
}
the best way to use is b -lazy js.
bLazy is a lightweight lazy loading image script (less than 1.2KB minified and gzipped). It lets you lazy load and multi-serve your images so you can save bandwidth and server requests. The user will have faster load times and save data loaded if he/she doesn't browse the whole page.
For a full list of options, functions and examples go to the blog post: http://dinbror.dk/blog/blazy.
The following example is a lazy loading multi-serving responsive images example with a image callback :) If your device width is smaller than 420 px it'll serve a lighter and smaller version of the image. When an image has loaded it removes the loader in the callback.
In Html
<img class="b-lazy"
src="placeholder-image.jpg"
data-src="image.jpg"
data-src-small="small-image.jpg"
alt="Image description" />
In js
var bLazy = new Blazy({
breakpoints: [{
width: 420 // Max-width
, src: 'data-src-small'
}]
, success: function(element){
setTimeout(function(){
// We want to remove the loader gif now.
// First we find the parent container
// then we remove the "loading" class which holds the loader image
var parent = element.parentNode;
parent.className = parent.className.replace(/\bloading\b/,'');
}, 200);
}
});
Example
jquery has a syntax for executing javascript after document has loaded:
<script type="text/javascript">
jQuery(function(){
//your function implementation here...
});
</script>
Is there a method for showing a loading image for dynamic images that are generated using Flickr? I have come across a way to do it as shown on the Wacom Community site but I have not been able to get it to work. Is there something simpler or does anyone have a better explanation than the originator of the technique from http://blog.realmofzod.com/asynchronous-image-loading-with-jquery/?
I just got this working. YMMV:
<img src="images/blank.gif" onload="replaceImage(this, 'flickrthumbnailimageurl')"
width="75" height="75" />
And then replaceImage:
function replaceImage(img, replacementImage)
{
img.onload = null;
img.src = replacementImage;
}
blank.gif is just a 1x1 pixel solid gray image. Basically, the idea is that this blank image is loaded and expanded to 75x75 (to preserve layout). That almost immediately fires the onload handler, which changes the image's source to the desired image. It has the effect you desire.
could do it with jquery:
<img src="http://myimages.com/loaderImage.jpg" id="imgIdLoading" />
<img src="http://flickr.com/image.jpg" id="imgId" style="display:none;" />
$('#imgId').load(function(){
// ... loaded
$('#imgIdLoading').remove();
$('#imgId').show();
}).error(function(){
// ... not loaded
$(this).attr('src','/whatever/error.png');
});
Is it possible to call a JavaScript function from the IMG SRC tag to get an image url?
Like this:
<IMG SRC="GetImage()" />
<script language="javascript">
function GetImage() {return "imageName/imagePath.jpg"}
</script>
This is using .NET 2.0.
Nope. It's not possible, at least not in all browsers. You can do something like this instead:
<img src="blank.png" id="image" alt="just nothing">
<script type="text/javascript">
document.getElementById('image').src = "yourpicture.png";
</script>
Your favourite JavaScript framework will provide nicer ways :)
If you're in the mood for hacks, this works as well.
<img src='blah' onerror="this.src='url to image'">
Is it possible to call a JavaScript function from the IMG SRC tag to get an image url?
Do you mean doing something like the following?
<img src="javascript:GetImage()" />
Unfortunately, no - you can't do that. However, you can do the following hack:
function getImageUrl(img) {
var imageSrc = "imageName/imagePath.jpg";
if(img.src != imageSrc) { // don't get stuck in an endless loop
img.src = imageSrc;
}
}
Then, have the following html:
<img src="http://yourdomain.com/images/empty.gif" onload="getImageUrl(this)" />
The onload event will only fire if you have an actual image set to the src attribute - if you don't set that attribute or set it to an empty string or something similar, you will get no love. Set it to a single pixel transparent gif or something similar.
Anyway, this hack works, but depending on what you are really trying to accomplish, this may not be the best solution. I don't know why you would want to do this, but maybe you have a good reason (that you would like to share with us!).
You cannot do it inline the image #src, but you should be able to call it from an inline script block immediately following your image:
<img src="" id="myImage"/>
<script type="text/javascript">
document.getElementById("myImage").src = GetImage();
</script>
you could dynamically feed the image by calling an aspx page in the SRC.
Ex;
<img src="provideImage.aspx?someparameter=x" />
On the page side, you`ll need to put the image in the response and change the content type for an image.
The only "problem" is that your images won't be indexed a you better put some cache on that provider page or you'll ravage the server.
Are you looking for this.src ?`
<img src='images/test.jpg' onmouseover="alert(this.src);">
Since you're using .NET, you could add the runat="server" attribute and set the src in your codebehind.
You might be able to do it on the server side. Alternately you could attach an onload event to swap the image src out. I guess the question then becomes, why would you have to use Javascript in the first pace?
I've had to do something like this before, and IIRC the trick winds up being that you can't change an src attribute of an image that's part of the DOM tree. So your best bet is to write your HTML skeleton without the image and 1)create an onLoad function that generates a new img element with document.createElement, 2) set the src attribute with setAttribute(), and 3) attach it to your DOM tree.
OnLoad event of image called again and again do some thing like this
how about this?
var imgsBlocks = new Array( '/1.png', '/2.png', '/3.png');
function getImageUrl(elemid) {
var ind = document.getElementById(elemid).selectedIndex;
document.getElementById("get_img").src=imgsBlocks[ind];
}
it's not work?
<img src="'+imgsBlocks[2]+'" id="get_img"/>
You may try this way also
const myImage = new Image(200, 200);
myImage.src = 'data:image/jpeg;base64,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';
document.body.appendChild(myImage);
No. The Img's SRC attribute is not an event, therefore the inline JS will never fire.
OnLoad event of image called again and again do some thing like this