I want to display about 5-8 images on my page, one by one, but I would like them to pre-load one and not loading them each time i switch to anohter image.
I have seen some examples where they have all images (hidden) on the page something like:
<img id="img1" src="images/image1.png" class="image" alt="" />
<img id="img2" src="images/image1.png" class="image" alt="" />
<img id="img3" src="images/image1.png" class="image" alt="" />
And the unhide the current image.
And what I have is one image that i change it's src attribute for path for new images from th array.
SwitchNextImage: function(){
var theimg=document.getElementById("imgContainer");
this.currentIndex = this.currentIndex+ 1 == this.totalImageCount ? 0 : this.currentIndex + 1;
theimg.src=this.slideimages[this.currentIndex].src;
}
The first method is obviously faster loading. But requies static links.
My questions is how can I make my method more faster loading?
You should look into image preloading. You can achieve what you want through javascript by creating a new image object for each image:
var img = new Image();
img.src = "image2.png";
This will fetch the image and store it in the cache without actually displaying it on the page, so when you come to switching the src of your main image, the browser can fetch it from the cache. Repeat this for all of your images and you should be set.
upon loading the document you can create an array with Image objects. see this article on techrepublic
I had an issue before where my image galley would just freeze on random photos every time. I tried these two things, I created a custom JavaScript with an array that loaded the images and I tried Light Box library. There wasn't any difference in the speed. The images loaded slow in both cases.
I looked it up and found out that the cause to slow loading is probably.
- Slow internet connection.
- Image size/format. (jpg is recommended for photos)
So I did some research and I came up with the simple solution that HQ photos are loaded faster when optimized for the web. This can be done with Photoshop.
After optimizing the photos, the quality stayed great and my gallery is loading instantaneously.
Related
I have a problem with dom size (3,044 elements).
I have a slider (Slick Slider) and images used in it causing DOM size prolem.
Img tag has lazy loading, it loads background image first and then loading main image data-src.
Reference to DOM size is this image :
<img src="/assets/img/img_bg_md.png" data-src="/uploads/images/202212/image_430x256_639c5b0a29f1f.webp" alt="Title" class="lazyload img-responsive img-post" width="1" height="1">
Is there a way to solve that problem ?
I'm not sure I understand what you want, but I'll try to help. You could set the already fixed image size to the image size you already know it will be. So you could put a background image of the image for it to load prettier
<style>
.img-responsive {
background-color: #ccc;
}
</style>
<img
src="/assets/img/img_bg_md.png"
data-src="/uploads/images/202212/image_430x256_639c5b0a29f1f.webp"
alt="Title"
class="lazyload img-responsive img-post"
style="width: 1px;height: 1px"
/ >
<script>
const imagens = document.querySelectorAll('.img-responsive');
var src, resp;
for (const imagem of imagens) {
src = imagem.getAttribute("data-src");
resp = src.match(/image_(\d+)x(\d+)_/);
if(const && resp.length > 2){
imagem.style.width = resp[1] + 'px';
imagem.style.height = resp[2] + 'px';
}
imagem.onload = function() {
imagem.parentElement.style.backgroundColor = 'transparent';
imagem.style.width = imagem.naturalWidth + 'px';
imagem.style.height = imagem.naturalHeight + 'px';
}
}
</script>
Other suggestions:
There are a few things you can try to reduce the DOM size when using lazy loading for images:
Use a lighter version of the main image as the background image. This can help reduce the size of the DOM element and also improve the loading speed of the page.
Use a placeholder image as the background image. This can help reduce the size of the DOM element and also improve the loading speed of the page.
Use a smaller image as the background image. This can help reduce the size of the DOM element and also improve the loading speed of the page.
Use responsive images. By using the srcset attribute, you can specify different sizes of the same image for different screen sizes, which can help reduce the size of the DOM element and also improve the loading speed of the page.
Use image optimization tools. There are several tools available that can help you optimize your images, which can reduce the size of the DOM element and improve the loading speed of the page.
Use a content delivery network (CDN). By using a CDN, you can offload the delivery of your images to a network of servers around the world, which can help reduce the size of the DOM element and improve the loading speed of the page.
It's worth noting that there is no one-size-fits-all solution to this problem, and you may need to try a combination of these approaches to find the best solution for your specific use case.
So I saw a nice background on http://terraria.org/about and thought by myself I want to that too since I run a Terraria Server.
So I have searched around the net for a function that could make this possible.
I have tried various things but this is the code I used:
link:
http://codepen.io/anon/pen/DCGuz
As you can see only the first image (which is on the top layer) moves, I was wondering how I could make all the images move as shown on http://terraria.org/about.
Also the background DOESN'T MOVE when I mouse over the logo or webpage itself while it SHOULD move
when I move my mouse over the website, it's not supposed to be a mouse-over image.
PS: When I try the moving background on my website (full screen) in my browser it's rather slow and doesn't move smooth, but it does move quick and smooth on terraria.org/about. Is there a way to fix this issue?
Thanks in advance!
EDIT: As you can see on my website http://teeria.net/ only the first image moves, and it's not smooth.
t.niese already said it: You create all these mouse-event handlers but only the topmost one gets called.
Instead, use $(window).mousemove() once and do all your stuff there. Also you repeatedly lookup the moving div with jQuery (every time the mouse moves) which might slow the animation down a bit.
You can save yourself quite a lot of typing/copying by using javascript closures: How do JavaScript closures work?
Here's how it looks with the suggested changes: http://codepen.io/anon/pen/KgFhI
Edit: Make sure you are not violating any copyrights when using the image on your own website!
Bonus-edit: window.requestAnimationFrame is neat: http://codepen.io/anon/pen/yEbnd
The easiest way would be to use CSS3. Basically you will need layers on top of layers.
Check out
Here-->https://github.com/abaddonGIT/paralax (translate to english)
demo-->http://angular.demosite.pro/paralax/
found here-->http://jqueryplugin.net/woolparalax-jquery-plugin-parallax-effect-css3/#sthash.XWD5Fr6P.uxfs
very simple
so it would be like
window.onload = function () {
$ ('# Wool-paralax). WoolParalax ();
}
<Div id = "wool-paralax">
<div class="wool-layer" data-shift="0.02">
<Img src = "img / 1.png" alt = "" />
</div>
<div class="wool-layer" data-shift="0.03">
<Img src = "img / 2.png" alt = "" />
</div>
<div class="wool-layer" data-shift="0.04">
<Img src = "img / 3.png" alt = "" />
</div>
I am building a web application that is extremely image heavy. A feature of it is an interactive timeline which allows the user to scroll through a series of years. Each year has a photo gallery with 20-50 images. I am looking for the best solution to hide images on load, and load them on demand (a click event). Here are a few options:
1) Use javascript to assign the data-src to the actual src on demand.
<img src="blank.png" data-src="images/real-image.jpg">
2) Place all images inside a div with display:none. I believe some browsers still load these images on load, so might not be a good idea
<div style="display:none">
<img src="images/real-image.jpg">
</div>
3) Use a technique like lazyload. This plug, JAIL allows for images to be loaded after an event is triggered.
Thanks in advance!
Number one is good. Just but let src point to nowhere src=""or to a single placeholder image. If you need the image file, switch src with the real path, and the Browser loads it. Switch again for removal, then the file is fair game for the gargabe collector.
Number two will just hide but still load the image.
Number three basically does what Number one does.
(First post, no reputation, still hope I can help).
I use the following technique:
// Contains Image path strings that can be loaded statically or dynamically
var imgs = [img1, img2, img3, img4];
var img = new Image();
img.style.cssText = "position: absolute; visibility: hidden; display: block";
document.body.appendChild(img);
for (var i = 0 ; i < imgs.length ; i++)
img.src = imgs[i];
Each iteration posts an HTTP request for the image, which is later cached upon arrival.
This works for me. I load the string paths into the HTML using a server-side generation.
I've a problem with image flickering with large images.
In my body i have 5 images:
<img id="img1" src="img1.png" width="250">
<img id="img2" src="img2.png" width="250">
<img id="img3" src="img3.png" width="250">
<img id="img4" src="img4.png" width="250">
<img id="img5" src="img5.png" width="250">
and one I'm dragging one of them with jQuery UI, all are changing their src and on dragend as well:
function dragStart() {
$('#img2').attr('src','newimg2.png');
$('#img3').attr('src','newimg3.png');
$('#img4').attr('src','newimg4.png');
$('#img5').attr('src','newimg5.png'); }
so fine so good. But I need to use large images (2000 x 2000px) because all images can be clicked and then they will animate to the full size of the viewport that they dont pixelate.
$this.animate(
{ width: 1800, top: -650, left: -250 },
{
duration: 4000,
easing: 'easeOutElastic'
})
I think because of the size of every image, they are flickering. Does anyone of you have an idea how to prevent this flickering on images, if all src change at the same time ?
Thanks for your effort
The problem you described does not sound like a pre-loading issue to me.
For preloading would happen, when you load ANOTHER image from the server once you start to move it around. But like I have read your Question you are moving the DOM-object containing your image in SRC around.
Thats most likely a Browser issue, because he has to scale your images down from 2k x 2k to lets say 100 x 100. That is some expensive interpolation stuff to do there.
So your main problem could be, like you mentioned, the size of the image.
Even preloading would not be of use, because you would have the same issues then.
In my eyes you should have two versions of your image: One small one (the size you want to drag around) and a big one, the one you want to display.
The big one can either be loaded automatically in background or on demand, when a user clicks on an image.
In the web it is quite common, to show scale the small image to screen size with smooth animations and start to preload in the background and when the preload finished, replace the fullscreen image to remove the pixel effect.
I hope I made myself clear.
The key to what you are trying to do is called preloading. However, you'll need to think carefully about how you want to do this.
Preloading involves loading the image in an img tag off-screen, but still in the DOM. This caches the image locally, which means that the next time you attempt to use the same source, it'll pull from cache instead of querying the server for the image (and, thus, flicker).
Preloading an image is a simple matter:
(new Image()).src="mysource.png";
What you want to decide is when you want to load the images. IF you load them all at first, you'll potentially use up a lot of bandwidth. If you load them on-click, you'll get buffering.
You can check if an image is loaded using the onload event present on img tags and wrapped within jQuery if needed, as follows:
var i = new Image();
i.onload = function() {
console.log("Loaded");
}
i.src = "mysource.png";
Credits to Robin Leboeuf for the concise Image() form.
You can use a function like this to preload your images:
function imagesPreload(){
var imgArray = new Array("path/to/img1.jpg", "path/to/img2.jpg", "path/to/img3.jpg");
for (var i=0; i<imgArray.length; i++) {
(new Image()).src = imgArray[i];
}
}
See the comments. You should ensure that the images are loaded before you show them. This is called pre-loading and can e.g. be achieved by having hidden images (not using display:none but placing them offscreen) that have the SRC that you want.
Edit: see the more elaborate answer by #Sebástien !
I am developing an image gallery application ..
Its loading images from the internet..
What i am doing is collecting image url into an array and bind it into a list view ..
Its works fine.. But my problem is the images shows a cross mark ( 'X') till loading the images.
What i am expecting is
Display a loading image for each emage untill loads the original image
if 1 is not possible, how can i remove the cross mark?
One approach is to set the src to a 1x1 pixel transparent gif, set the dimensions to the final image size, the background image to a loading image, and then use JavaScript to load the image, and onload swap it into the placeholder gif
example
HTML
<img src="images/spacer.gif" alt="Big Image" border="0" id="big_image" style="background-image:url('loading.gif');" width="3396" height="2347" />
JS
var I = new Image();
I.onload = function () {
document.getElementById('big_image').src = I.src;
};
I.src = 'http://apod.nasa.gov/apod/image/0911/ngc2623_hst_big.jpg';
You cannot remove the 'X' mark as that is a browser-specific feature. You could, however, set your images to have a background image of your loading image.
simple example:
<img src="" style="background-image: url(loadingimage.gif)" />
This way, your loader shows up and is masked when the full image loads.