What is the best method to preload images <img> and why? I want to show images on link's hover i can't use images in CSS background so i can't use CSS sprite. but i want to preload all images while page load . which are add as <img>.
You can use the Image() object in JavaScript to preload the image, then swap it in when you're ready. Here's the HTML:
<img name="img01" src="regular_image.jpg">
Then in the JavaScript:
my_img = new Image();
my_img.src = "swap_image.jpg";
Which will put the image in your cache. When you swap it in, you can call:
document.img01.src='swap_image.jpg'
Related
<a class="background-gif" href="#">
<picture>
<img class="lazy-pic" src="img/white-placeholder.png" data-src="img/certificates/2.png">
</picture>
</a>
img tag has a placeholder and a link has a class "background-gif" that adds loading gif as a background. When I scroll to image, I get data-attribute and put it into src. I need to add "loaded" class to link when picture from data-attribute is loaded and loading background gif will be removed.
const container = '.background-gif' // it's for example only))
const lazyPic = container.querySelector('.lazy-pic');
lazyPic.setAttribute("src",lazyPic.getAttribute('data-src'));
lazyPic.addEventListener("load", (e) => {
container.classList.add("loaded");
})
I've tried to use onLoad event on img, but if it has a placeholder, event fires before picture is loaded. If i remove src placeholder it will cause mistakes in validator)) So, what can I do? The idea to put loading gif as a placeholder is not convenitent - I have a lot of pictures with different fixed sizes, gif should to be same size everywhere.
I have a lot of images on my webpage so I have used lazy loading to help with the performance. I have used one 25kb image as a place holder for all HD images. Normally while scrolling lazy load images display once they come into view, however the images are within a carousel and only the first images changes. I was hoping on click of a button which also displays the carousel I could load the new images by class?
<img src="./img/tinyBlur.jpg" data-2x-1="./img/design7.png" class="carosuelImg lazyload-2x loading-lazy hidden">
For what I understood, my friend
var img = document.querySelector("img");
img.classList.remove("hidden");
img.src = img.getAttribute('data-2x-1');
I am working on an application front-end with HTML, CSS and JavaScript, all is fine but before the image is loaded in the header, the broken image icon appears first.
I want to add a background color in place of broken image till original image is fully loaded.
Show <img> after the content has been fully loaded.
<img style='display: none' onload="this.style.display = 'block'" src="...">
if you are using jQuery
<img style='display: none' id="myImg" onload="$(myImg).show()" src="...">
If the image is not loaded when the page is initially rendered the img tag will display the icon. If you are using any JS then here is what you can do
Put the image tag in a condition and display it only when the image is loaded in the background (async calls).
2 till the image is not loaded up hide the image tag and use a label or any other tag with the background color.
1)with css the solution is alt=" ".
2) with the help of java script
place this code in image tag
when before image is fully loaded this will over come error by placing img in background
Another method: use inline svg img placeholder, use ajax to request real img then repace placeholder.
inline img
<img alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />
Inside a page I am having a TR on which when user click it change it's color to blue and arrow color to white. This is achieved by changing elements' class dynamically.
But due to this what happen is, when user click on TR user saw image loading delay. How to preload that CSS image.
this.className = this.className + " active";
CSS
.table td.arrow div {background-image:url("../stuff/arrow.png");}
tr.active td.arrow div { background-image:
url("../stuff/arrow_active.png"); }
Update
One more thing want to update that static content is getting loaded from other server.
The browser only loads images from the CSS that are shown. So you could place your arrow_active image in a element, that is visible but has no opacity.
But i would suggest you use sprites: Less HTTP requests + no preloading problems: css-tricks.com/css-sprites , alistapart.com/articles/sprites
You could solve your problem like this with pure CSS.
http://jsfiddle.net/Q6dTf/
Alternatively you could use a :before pseudo element if you dont want to add a new HTML element.
As #meo said you are probably better off using sprites, but in case you want to preload images you can just create a dummy Image instance that loads the image into the browser's cache.
Like:
var preload = new Image();
preload.src = '../stuff/arrow_active.png'; //triggers the download
In case you want to wait for the preloading to wait for the page to build you can listen for the load event that the preload will fire when it has finished loading the file (be careful as this is complicated terrain).
image preloading code snippet :
myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg")
jquery code to display preloaded images:
$(".vrpl_slider_img").fadeIn(40000).html(myimages[i]);
I used image preloading so that the first image in my slider does not take time to show up, but it does with a blank space instead and all the consequent images show up without showing any blank space. But I don't know how to fadeIn the images during display.
the following code
$(".vrpl_slider_img").fadeIn(40000).html(myimages[i]).fadeIn('slow');
shows an error in console:
$(".vrpl_slider_img").fadeIn(40000).html(myimages[i]).fadeIn is not a function
I want a slider the one in http://www.cisco.com/
1) what should be the steps so that no blank space shows up at the very first time the slider begins? Putting code inside $(document).ready(.. or not does nothing.
2) how to achieve the fadeIn effect?
3) In http://www.cisco.com/, for each image, the text on the image seems to be highlighted a bit after the rest part of the image. How to achieve that?
EDIT:
after the image preloading snippet, the next segment follows:
for (i=0; i<n; i++){
$(".vrpl_slider_img").fadeIn(40000).html(myimages[i]);
if(i==n-1){
i=0;
}
}
that is all about the part of the slideshow I am interested to discuss here.
You don't want to be calling .html() on an img tag. You want to be setting the .src attribute on the img tag to point it to a new image. Assuming that .vrpl_slider_img is initially not visible, you would use this:
preloadimages("img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg")
// then some time later after the preload images have loaded
$(".vrpl_slider_img").attr("src", "img/1.jpg").fadeIn(40000);
You do not need to use the preload images at all once they've been loaded. The point of the preload images it to cause the images to get loaded into the browser cache so they are available locally (rather than over the internet) and will thus be loaded immediately when requested in the future. So, you just use the .src attribute with the normal image path and, because the image is in the browser cache, it will load immediately.