Cordova on iOS - Some images load others don't - javascript

I have a Cordova app that I'm testing on iOS. When I launch the app, the login screen appears and contains two images: background and a logo. The background image loads fine, but the logo doesn't load until after I switch to a different page and then go back to the login page.
Here is a screenshot of what I see:
The image is bundled by webpack, and it loads/renders fine in the the browser. Why are some images loading correctly while others aren't? They're all png images being resolved by webpack.

The problem was caused by react-router. According to a bunch of answers I found, HashRouter should work in Cordova, but that's what I was already using, so I switched to MemoryRouter and my images are now loading properly.

Related

What can cause chrome to display a web page all smudged and how to troubleshoot? (image included)

What could cause Chrome on mobile to display a web page appears to smudge elements when scrolling the page, such as the below image.
The page uses many icons from Fontawesome and uses Google fonts (font source NPM package), reactjs, jQuery and is packaged using webpack. It includes multiple webpack bundles on the same page.
What could be the approach to troubleshoot this issue?
The example below is at URL https://uquiz.com/DlVmXD:
The issue appears to have surfaced with the inclusion of the additional react component further down the page that shows suggestions of other content. Apparently it doesn't happen when the suggestions aren't displayed such as on this embed URL of the same content: https://uquiz.com/quiz/embed/DlVmXD/what-romance-trope-are-you?embed=true
I have tried it on many devices and it is fine and thousands of people are successfully able to use the page without issue every single day, but many people are reporting this issue. Every person that I have investigated is using Chrome on a mobile device.
I can't find anything to do with this behviour on the githubs for the main libraries that I use so I'm left thinking it could be a hardware issue. Could it be?

Github Pages does not load the three.js animation

My index.html runs well when i when i do '''parcel index.html''' locally, but when i posted it to github pages, it does not shows the js animation. And i see the console of the browser, it doesn't shows any error, what should i do to make the image animation show up? (I am pretty new to this, thanks for the help)
Here is my website link.
https://mollyxuemn.github.io/Meini-sWeb/
It should be like this:
enter image description here
For the code please see: https://github.com/MollyXuemn/Meini-sWeb
Seems like the problem is the gsap import here: https://github.com/MollyXuemn/Meini-sWeb/blob/a6a4b36ece3c52bd2dcfd73ae6b276b3f8dec8e7/app.js#L2
The same app.js is loaded on the website: https://mollyxuemn.github.io/Meini-sWeb/app.js but you should load a compiled/bundled js file instead I believe, which includes your dependencies as well.

White screen after load page in cordova android app - Android 5.1

I have an Android - Cordova Project.
When index.html (main page) page is loaded, on Android 5.1 (real phone) only shows a white screen.
When I minimize app by the phone's home button and go back again, using task manager, the page loads normally as expected.
I found a similar question, where someone argued about WitheList plugin which I added to my project.
Answers are likely about to make a delay using setTimeout, which I applied, with no success.
I have some local css and js files in index.html.
In onDeviceReady.js file, I call load method to set the html content for a div, add some click button functions and re-size some divs in setTimeout and an addEventListener.
What's the reason for this?
Waaaauuu!!!
I upgrade my jquery to v2.2 and my problem solved!. It is a new challenge and new experience.
I start debug with a real device with Android 5.1.1 (Samsung S6) and see that there is an error: validate_display:255 error 3008 (EGL_BAD_DISPLAY)
But after search I don't find any useful answer (like this).
I guessed that one or more javascript file(s) make this bug (white screen problem), so I remove all js files tags from index.html and add one by one.
Yes, my jquery file version cause problem. I upgrade it from v1.11 to v2.2.

Windows Phone 8 + Gif Preloader (Loading Animation)

I'am developing a PhoneGap Application. and i have an ajax loader in the application, ie. whenever a ajax request is sent to server a loading animating .gif image appears. I have already developed iPhone and Android versions of the application.
But the problem is when i tried to deploy it in Windows Phone 8 the .gif animation doesn't work. Its not a CSS pre loader, its a simple .gif image. I checked WP8 Wikipedia page and there it clearly says WP8 supports .gif image.
Can somebody point out what's am doing wrong. if its something not possible then can someone please point out any different approaches?. Something simpler. (I don't want to add any 3rd party .js plugins in my app).
Thanks.
Check the property of the gif image.
Build Action should be set to Content
Phonegap on WP7 does not load images

JqueryMobile 1.3 ICONS not appearing?

I am creating a mobile application for android on Codio online IDE, and im using jquery mobile. I downloaded the latest Version: 1.3.0's .js & .css, but when I run it, all seems to work except JQM icons. NONE of the JQM icons appears, while the dark circles should host various white icons.
How to make JQM icons appears ?
Edit: Answer: search, download, and deploy to the correct place the Zip File: jquery.mobile-1.3.0.zip (JavaScript, CSS, and images). Available on http://jquerymobile.com/download/
you are missing the icons files. they are referenced in the CSS in your case it's the https://d.codio.com/hugolpz/Cat-in-migration/App/css/images/icons-18-white.png that is missing

Categories