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
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 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.
I'm looking for help understanding a bizarre loading delay on iOS. I have this exact HTML:
<!DOCTYPE html>
<img src="img/potatoes0.png"/>
<img src="img/potatoes1.png"/>
<img src="img/potatoes2.png"/>
<img src="img/potatoes3.png"/>
<img src="img/potatoes4.png"/>
<img src="img/potatoes5.png"/>
<img src="img/potatoes6.png"/>
<img src="img/potatoes7.png"/>
<script src="js/jquery-2.1.4.min.js"></script>
…plus eight identical images of potatoes and a copy of jQuery, all hosted on a remote web server.
This page loads pretty much instantly in a normal browser, but Safari on an iPhone (or in the iOS simulator on my computer) waits 11 seconds before loading the JS:
The images all load basically at once, then the browser waits around 10 seconds before starting to load the JS.
I've confirmed with Wireshark that the request doesn't go out until around the ten second mark, the delay is not server-side.
If I add more images, the delay increases (e.g. to 30 seconds), even though the images still take well under a second to all load.
If I add more JavaScript files, the browser loads them all simultaneously after the delay.
What the heck is going on?
I don't think this is anything to do with jQuery or DOM load events.
I have encountered exactly the same problem testing on an iPod and iPad running iOS 9. I thought I was going nuts.
I created a file called test.js that contains this:
alert("test");
Placing this as a script include at the bottom of my page (just before the body close tag) introduces a significant delay before the file is executed.
Placing the file at the top doesn't cause any issues, so is my only solution currently.
Testing on various non-iOS devices and browsers does not show this problem.
#Sidnicious any chance you can test with a simple file like mine instead of jQuery?
Edit: I found a popular site that includes its JS at the bottom:
getbootstrap.com. I visit that site on an iPod or iPad, refresh the page a couple of times and page loading freezes for 10-20 seconds before the JS loads.
jQuery does not trigger until the entire DOM loads.
So, if you have a bunch of images - jQuery wont trigger till all of them are downloaded. To speed this up, try lazy loading your images.
One thing to note on Javscript in all forms as it applies to mobile browsers. If you have any kind of scrolling going on - Javascript will delay running until scrolling stops (this is to reduce battery drain on mobile devices by reducing the load on the processor). This may or may not be related to your issue, but should be noted whenever a JS problem arises only on mobile browsers.
I'm noticing my Phonegap app is having some memory issues on iOS7 that weren't happening on iOS6 .
long iScroll lists with many images
displaying images from the phone's album (9mp) will crash after you view several
For #1, this was never an issue on iOS6, regardless of device.
For #2, I am re-using the same DIV element to display the next picture, so it seems that the previous image is not being cleared.
The techniques mentioned in this post no longer appear to work in iOS7:
iPad/iPhone browser crashing when loading images in Javascript
The best solution for this problem I found is the following code:
var img = document.getElementById('imageID');
img.parentNode.removeChild(img);
img.src = 'data:image/gif;base64,' +
'R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
setTimeout(function() {
img = null;
}, 60000);
This sets the src attribute to a tiny gif and then waits long enough for garbage collection to happen eventually.
See: http://www.fngtps.com/2010/mobile-safari-image-resource-limit-workaround/
This should work for you. I could verify that the memory is released by using the Xcode instruments. Unfortunately this solution doesn't seem to work for homescreen apps which I am using.
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();