I am trying to load an animated image on top of an element, and to do this I am switching between a list of pngs (labelled 1 - 124) and creating an image element for each of them and giving them a src.
The idea is I can have an empty image element and run a function to swap the src every 25 milliseconds with the next image in the list to give an animated image effect.
This works fine on Mac (chrome) as it loads the images ONCE and then seemlesly changes the src without loading any more images (I checked this by looking in the network tab of the chrome dev tools).
But for some reason on my windows PC it is sluggish and is trying to load the image from the server again every 25 miliseconds ..
cycle_images: function() {
this.imageCount = (this.imageCount < 123) ? this.imageCount + 1 : 0;
document.querySelector('.animated_image').html = this.imageList[this.imageCount];
},
This is the code I am using and I am confused why it works fine on my macbook but not my pc. Is there any way to force images to not re-load and just looad from cache?
One solution could be creating 124 img and make them invisible on the page and then change your image accordingly.
But a most promissing and proper way could be concatenating these image into one gif file and load it once! This way use internal engine to render and it is much more effecient and also does not affect on user experience.
Related
My current issue is that I have a loading bar animation on my web-based app that is shown (obviously) when the whole page or specific things are loading up. It is supposed to look like one of those Samsung TV Apps so it needs to be quite polished with the UX.
What me and my team are doing right now is a mix between creating an element for it and I assumed it gets cached in the local device which is an issue. I've known of a few ways that I can go around this like adding a Math.random() query at the end of the src url but I'd rather not follow that route for now.
I also saw a way that I believe involved simply setting the element.src = 'theSameUrl.gif' URL to be the same and I assume forcing the device to reload the file instead of using the cached one.
I would also be open to trying new file types that could make this a lot easier but I must keep in mind that this app will work on a LOT of different hardware, from Samsung TV's to BT Boxes or even Virgin Media Tv Boxes, amazon firestick etc.
At this point I'll take anything :P
You can "force it" to reload by wiping it source: img.src = ""
Then you set it again: img.src = "your_src_path"
This way your .gif will start from zero, at least on Edge, Chrome and Firefox, it should work the same way on a TV.
I have an extremely annoying problem - hopefully someone can shed some light or at least tell me I have to live with it.
I've written a basic medical image viewer that can display a series of jpg images. As the user scrolls through (finger, mousewheel, arrow keys), the active image is updated and displayed. I preload the images into the browser cache to improve the smoothness of scrolling. On PC and Android, there is no flashing effect while the new images is displayed in the DOM - its perfectly smooth. On my iPad (iOS 9.3.3) there is a very noticeable stutter while scrolling through the stack of images - on both Chrome and Safari. After a while it gets better. Interestingly though, I have a first generation iPad and I don't have this problem on it. The image series that I pre-load generally contains about 50 images, roughly 30KB each in size.
I've tried various methods of pre-caching:
Using a PHP loop to insert images into the DOM and setting visibility to hidden.
<img src='$url$imagearray[$i]' width='1' height='1' style='visibility:hidden;margin:0;padding:0;height:0px;' />
Link preload
<link href="$url$imagearray[$i]" rel="preload">
Javascript/Jquery in various flavours
var jsArray = ["<?php echo join("\", \"", $imagearray); ?>"];
function preLoadSeries(arrayOfImages) {
for (i = 0; i < arrayOfImages.length; i++) {
images[i] = new Image();
images[i].src = "<?php echo "$url"; ?>" + arrayOfImages[i];
//console.log(images[i]);
}
}
preLoadSeries(jsArray);
EDIT:
The images are added dynamically on user request, ie user clicks on download button, ajax fires server script to download and process jpgs on the Apache webserver and returns a View button to the same page. User clicks/taps button open the newly downloaded images on a new (image-viewer) page. If I open the images immediately, the scrolling is quite bad. If I wait a minute or two, it's much better. Does Apache have something to do with this, possible taking time to index newly added content? I need to reiterate that PC and Android is completely fine.
Thanks in advance
I have looked at a number of SO questions on how to preload images, I have created a function
$(images).each(function () {
var img = new Image();
img.src = this;
$(img).appendTo('body').css('display', 'none');
});
Which appends the images to the dom. However when I add a product to my cart, (the minicart will contain the images which have been preloaded), chrome still produces a request on that minicart image even though it has been preloaded (I can see the image in chrome developer tools). How do I get chrome to use the image which has already been loaded instead of getting another one from the server?
your server is sending wrong headers; do a search about Cache-Control, Expires, Etag and Pragma and set them to cache your images instead of download
chrome is buggy or it intentionally downloads the image twice. for example setting display:none too early may cause the problem, use position:absolute;left:-100000px; instead
your developer tools is set to disable cache (click on the gear icon, then uncheck General > Disable cache (while DevTools is open) )
i have a problem in iPad Safari. when i use Javascript to append image to div using elm.appendChild(img) the images don't appear until the screen is touched. the same code works perfect on IE,Firefox,Chrome,and android browsers.
i have uploaded video that shows the problem. http://www.youtube.com/watch?v=nBN9fThDik8
is it related to the device ? or there some special code for loading images in iPad safari?
or any solution ?
iPad (more so than iPhone as far as I've experienced, although that's just a gut feeling) is notorious for avoiding loading and rendering large resources unless it decides the user is going to see them.
How about faking the user input required to trigger the render, ie the scroll, after appending the image? Sample code here, may work:
function scroll(){
var body = document.body;
var xy = [body.scrollLeft, body.scrollTop];
window.scrollTo(xy[0],xy[1]+1);
window.scrollTo(xy[0],xy[1]);
};
To be called immediately afterwards, eg:
appendImg();
scroll();
I am using a JQuery Plugin called lightbox (which is great btw). Problem is, I am accessing images on external sites and I think they are blocking lightbox from preloading them.
Specifically I have confirmed that picasa gives the preloader a 404 (using firebug), but if I right click the failed request in the firebug "net" tab, and "Open in new tab" The image loads fine.
This happens with any images from picasa, unless I've already viewed them (in which case I believe they are pulled from the brower's cache rather than loading them again)
There are a a few differences between the headers sent by the browser vs the preloader (also from firebug):
the preloader's "Accept" header is:
image/png,image/*;q=0.8,*/*;q=0.5
vs loading the image directly in the browser:
text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
I suspect this is one way a remote server could differentiate a browser request from the javascript. What do you think?
Also, here is the preloader code from the plugin... just in case
// Image preload process
var objImagePreloader = new Image();
objImagePreloader.onload = function() {
$('#lightbox-image').attr('src',settings.imageArray[settings.activeImage][0]);
// Perfomance an effect in the image container resizing it
_resize_container_image_box(objImagePreloader.width,objImagePreloader.height);
// clear onLoad, IE behaves irratically with animated gifs otherwise
objImagePreloader.onload=function(){};
};
objImagePreloader.src = settings.imageArray[settings.activeImage][0];
update
apparently picasa is blocking me from displaying the full-size images at all whether part of the DOM or preloaded via javascript... not sure what to do about this
You could always add the preload IMG tags to the DOM in a hidden DIV instead of loading them with JavaScript. That way the browser is loading them "naturally".
solution
Picasa will let external sites load images up to 800px wide... if you try to use any larger than that on an external domain (not picasaweb.google.com) you will just get a 404
fortunately for me 800px is plenty... I was just trying to load the originals, which you're not allowed to do at all haha