Click while loading elements (lazy loading ?) - jquery-mobile

We're creating an App using PhoneGap and JQuery Mobile.
We need to display a (very) long list of elements and they have to be displayed quickly. To do that, we first load 50 items, then the following 50, and so on. Doing this, the user can begin to work with the first items as soon as they are displayed.
The list is loaded using this kind of code:
function loadTheNext50Items() {
...
//loading stuff
...
if (haveItemsNotLoaded) {
setTimeout(loadTheNext50Items);
}
}
This works great, except with some phones (Samsung S4 mini for example). With those phones, we can't interract with the loaded items until they are all loaded (clicks are not triggered for example).

Related

iOS Widget Configuration: How to show a loading spinner while fetching data with an IntentHandler?

My app has a widget that allows for customization. When the user chooses to edit the widget, it flips to reveal a customization pane. For example, let's say I have a weather widget and the only customization option is the city for which to show the current weather condition.
When the user taps the current city to choose a different one, I need to perform a network request to fetch the available cities that might take some time under difficult network conditions. In that scenario, my widget configuration pane appears to be broken because nothing happens when I tap on the current city. Only after several seconds (when the data has been fetched), the modal screen appears with the list of available cities.
But I want to give the user some visual feedback that something is happening while the cities are loading. How can I achieve that?
Note
I found this other question on Stackoverflow with a GIF that shows a loading spinner (activity indicator / ProgressView) inside the widget configuration pane. How do I make this thing appear?
Sample Implementation
This is my sample implementation in my IntentHandler to simulate a network request before returning. (Tried the same thing using a completion handler instead of the async function.) It doesn't show a loading spinner.
func provideCategoryOptionsCollection(for intent: CityIntent) async throws -> INObjectCollection<Category> {
// Simulate async network request
try await Task.sleep(nanoseconds: 5 * Double(NSEC_PER_SEC))
let citiesSection: INObjectSection<City> = INObjectSection(
title: "Cities",
items: [.singapore, .sydney, .honolulu]
)
return INObjectCollection(sections: [citiesSection])
}

.play() for audio tags lag on iOS (and possibly other mobile devices)

I am attempting to rebuild a game that works on itch to be compatible on most major devices and browsers. I have a problem where on iOS (and possibly other mobile devices) a call to play audio tags from click and touch events has quite a significant delay.
I have read about several potential causes, including the 300ms delay, preventDefault for the second click event, stopPropagation for potential parent clicks, different audio formats causing lag in decompression, etc. Nothing seems to work.
Initially my intent was to keep everything in vanilla js without outside libraries to force myself to really learn what's going on under the hood. However, I have been having some success with some outside libraries for other problems, so I tried fastclick.js for this problem. That didn't work for me either. So, if someone knows how to address this issue without a library that would be great, but after looking at the fastclick code, that may be beyond my level of comprehension.
A current build can be found at www.teachersteve.net/assett_loading_with_ian/assett_loading_with_ian.html
Some explanation of my thought process:
I removed anything that is actually game related to try and isolate the problem. I put all the assetts directly in the html to simplify the loading process and wait to start the js after the DOM loaded
document.addEventListener("DOMContentLoaded", doSomething);
I am currently only calling one audio tag to play as I read somewhere that calling multiple tags can overload the decompression process and cause a delay. That seems to not be the issue.
I have 3 different file formats so far for compatibility attempts... I did read that LEI16 (a wav format) might be best because it eliminates compression, although I haven't tried it yet.
This is the rest of the doSomething() function
function doSomething() {
document.body.style.opacity = 1;
document.addEventListener("click", playAudio);
document.addEventListener('click', preventInputDefault);
document.addEventListener('ontouchend', preventInputDefault);
console.log("assetts loaded");
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
function playAudio() {
// backgroundMusic.play();
letterAudio.play();
// correctAnswerAudio.play();
// letterAudio.play();
// correctAnswerAudio.play();
}
function preventInputDefault(evt) {
evt.preventDefault();
console.log("hello preventInputDefault");
evt.stopPropagation();
console.log("hello stopPropagation");
}
}
Thanks!

IIOS IPAD No Unload,beforeunloador, paghide events

I have a MVC web database application where the records are basically documents with items.
Documents are locked, not items and they locked by code when the user looks in any of 4 or 5 different screens for any given document.
there is a 10 minute time out on the record locks. The user does not do anything with the record for 10 minutes and another can take the record. There is code that detects the lock was lost and taken by someone else. It works fine and is technically sound.
The workflow of the application relies on the lock being released when the user leaves the screen or closes the browser, or if they press the refresh button.
These are work fine on windows and android but not on ipad.
I understand there is no
beforeunload
on ios but I though there was
unload
or
pageHide
neither of these work.
Here is my code.
var isOnIOS = navigator.userAgent.match(/iPad/i)||
navigator.userAgent.match(/iPhone/i); var eventName = isOnIOS ?
"pageHide" : "beforeunload";
window.addEventListener(eventName, function (event) {
ReleaseRecordLock(); } );
This code works on all mentioned platforms except that the events don't fire on IOS.
It looks to me that this is deliberate on Apple's part so I an not thinking it will change.
So now the question.
What can I do to ensure that these records get unlocked if a user changes screens or closes the browser. If they don't no users will be able to access the document for 10 minutes which will not be acceptable.
Thanks
Edit... I don't need pop ups or notification. I just need reliable unlocking
As mentioned above none of the events that are supposed to work actually fire. pageHide and unload do nothing.
I found mentions of how to get around this problem but no details so I though I would detail it here.
This solutions works with areas and standard sites.
My solution to get around part of this was to detect if the browser is running on IOS and if so to change the link in the menu.
<li>
#{
if(Request.UserAgent.Contains("iPad") || Request.UserAgent.Contains("iPhone"))
{
<a onclick="IOSReleaseLock('controller', 'action')" href="javascript:void(0);">LinkText</a>
}
else
{
#Html.ActionLink("link Text","action","controller",new { Area = "Tasks" },null);
}
}
</li>
Every single link in the application has to have a function called IOSReleaseLock() available or the solution will not work. Not all pages lock records, only those that actually change documents. Reports, and basic website functions such as change password, log out, and the sys admin stuff do not need record locks.
At this point I have 2 versions of IOSReleaseLock()
This is the version that is used on pages that do not required unlocking.
function IOSReleaseLock(_controller, _action)
{
var url = '/__controller__/__action__/';
url = url.replace('__controller__', _controller);
url = url.replace('__action__', _action);
window.location.href = url;
}
This is the version that is placed on pages that required unlocking.
function IOSReleaseLock(_controller, _action )
{
var url = '/__controller__/__action__/';
url = url.replace('__controller__', _controller);
url = url.replace('__action__', _action);
UnloadingRecordLockRelease();
window.location.href = url;
}
Every link has a wrapper so every single page must load a version of IOSReleaseLock(). This includes your /home/index or where ever your application starts. If you miss one then once you are on that page your menu system links will not work anymore.
Pages that require the UnloadingRecordLockRelease() function load that version and the pages that do not require unlocking load the first version.
On IOS every time you click a link, IOSReleaseLock() is called. This may seem to be obvious, but for clarity, the version of IOSReleaseLock() that executes is the version that is on the current page, not the version on the page you are going to.
So as long as the user stays on the site and does not close the browser then the records are unlocked correctly.
When the user logs out all records are unlocked but I have no solution for when the browser tab is closed or when the browser is closed without the user logging out.

Titanium How to get webview load to fire once and then reset

I am using webview load to detect when a page is loaded but i need it to only fire once but it fires many times i have come up with a solution below to get it fire once, but this will only happen once and once only i need it to fire every time a page is loaded but only once example.
webviewload = true;
webview.addEventListener('load', function() {
if(webviewload){
//run code to add stuff to webview this will run once
webview.remove(oldsidebar);
webview.add(newsidebar);
webviewload = false;
}
});
the above works fine for one webview load but if you run again it is obviously set to false so i can only run this code once.
I found a hack that kind off works for me but i am looking for a better solution i understand its firing because it fires on every element load ads etc on webview.
webviewload = true;
webview.addEventListener('load', function() {
if(webviewload){
//run code to add stuff to webview this will run once
webview.remove(oldsidebar);
webview.add(newsidebar);
webviewload = false;
}
setTimeout(function(){
webviewload = true;
},5000)
});
ok above works but isn't ideal if the page take longer than 5 seconds to load etc i am getting problems.
Can anyone give me a suggestion on how to fire webview load once then reset so i can run a block of code correctly.
Hope this makes sense thanks
Yea, this is due to the fact that the page you are loading, like almost any portal homepage, is comprised almost fully of ajax calls to other pages and scripts, etc. This is going to cause your load event to fire, and fire, and fire again until everything is loaded.
I suppose one way around this would be listen for the load event and set some interval that if passed would kill the listener and carry on.

My app crashes if I change the control view repeatedly

I have an app that reads from a database some data ( ASIFormDataRequest ) and some images from server files ( setImageWithURL ). My app does it every time the viewController is changed (in order to have everything updated). So I guess there is an issue with cached images If I push my app to the limit switching viewControllers repeatedly my app crashes. Why is this?
All of this has appeared after adding the setImageWithURL functions. Has anyone run into something similar?
I may have to change the way my app works How do you guys do these calls to the server/SQL? How often?
EDITED:(NON_ANSWERED YET ):
XCODE does not say anything about it , when my device crashes it only displays:
2011-12-29 20:14:56.479 CaeDeCajon[4969:6e4f] arrayProductos.id :13
id_producto: 31 2011-12-29 20:14:56.481 CaeDeCajon[4969:7b5f]
arrayProductos.id :25 id_producto: 15 2011-12-29 20:14:56.490
CaeDeCajon[4969:7b5f] arrayProductos.id :31 id_producto: 15
2011-12-29 20:14:56.491 CaeDeCajon[4969:7b5f] arrayProductos.id :32
id_producto: 15 2011-12-29 20:14:56.395 CaeDeCajon[4969:955f]
arrayProductos.id :22 id_producto: 35 (gdb) // HERE IT STOPS
RUNNING.
for a better understanding of the question, my app is designed as follows:
Based on a 5-icon TabBar.
In the second icon I have a tableview with categories of products ( tables, chairs ... ) and if you press on one of them appears another viewController ( the usual detail view ) showing several products in a row ( thanks to a scrollView ) , here there is a navigationController with a button on it, when pressed it takes you to the gallery mode: showing the same products that were shown in the scrollView but in a gallery mode, if you press one of the products it takes you back to the scrollView and move your screen to the product chosen. Pretty normal stuff .
In the third icon I have the check-out basket, where every product picked up on the scrollView (where there is a buy button ) is pressed.
The case is that I "read" Asycn from the database all the information(no pictures) at launchingWithOptions and every time the viewController is changed, to make sure the user does not pick up a product that was sold out. I implanted this on its own and it seemed to worked fine and not to crash my app ( info : name, stock, ... only strings ). light data.
Here is where I think the problem is: I "read" all the images display from a file system in 1&1 ( hosting compony ), and seems to work fine and fast. The problem is when I swap/change the viewController repeatedly and quick between tableView-ScrollView-galleryMode , it crashed 4 times in a row for the same reason. I must say that I get the images for every viewController, for example the images in the scrollView,galleryMode and checkoutView are the same . Can I reuse them ? because I have calls to the URL everyViewController and I guess that is not healthy.
The code to download images:
NSString *URLphotos =[[NSString alloc]initWithFormat:#"http://www.myurl.com/imagenes/%#",picture1.jpg]; // this is not always picture1.jpg but I changed it for making it plainer.
[cell.photo setImageWithURL:[NSURL URLWithString:URLphotos]
placeholderImage:[UIImage imageNamed:#"placeHolder.png"]] ;
Is it enough? I got no more.
wanted tips:
How/where do you guys "read" the images from the URL in order not to crash the app but have the app updated all the time?
Is there something going on with my cache that is making me crazy ? fix it?
Thanks in advance for the interest
It's not clear if you are using Coredata but I had a similar experience with an app. It also had a tab bar and quickly pressing between items would cause random crashes. The issues was coredata being read / updated / deleted at the same time.
I resolved the issue by moving all of my coredata read, writes and updates to the main thread. (example in Swift):
dispatch_async(dispatch_get_main_queue(), {
myDatabase("NameHere", theCommand: "TRUNCATE", theQuery: "dummy")
})
I made a series of functions for the common coredata commands I needed so your code will of course be different. But try running coredata on the main thread and see if your problem is solved.
If you have a CPU intensive coredata task then you will should not run on the main thread but the complexity of the solution is increased (I have only been using Xcode for 3 months) and someone else may be able to help.
But if you are using coredata try this first to see if it solves your problem.

Resources