Why assets loading does not complete in Safari?

hopewise · February 11, 2017, 6:21pm

My html5 app loads all the assets fine in Chrome & the app gets started normally, however, it will stuck at Safari at the end of bar as seen here:

There is not errors in the console & all loaded files at Network have status 200.
I am on openFL 4.7, how would I know which file that does not load? and works in Chrome but not in Safari I see this problem?

singmajesty · February 11, 2017, 6:39pm

Perhaps it is a problem with detecting that fonts were loaded?

hopewise · February 12, 2017, 5:15am

How can I know? if so, how can I fix it?

hopewise · February 12, 2017, 6:32pm

Where is the code that decides all assets got loaded?

restorer · February 13, 2017, 8:50am

It’s in Lime.

Top-level asset library loader:

github.com

openfl/lime/blob/develop/lime/app/Preloader.hx#L137


		
		#if flash
		Lib.current.addChild (this);
		
		Lib.current.loaderInfo.addEventListener (flash.events.Event.COMPLETE, loaderInfo_onComplete);
		Lib.current.loaderInfo.addEventListener (flash.events.Event.INIT, loaderInfo_onInit);
		Lib.current.loaderInfo.addEventListener (ProgressEvent.PROGRESS, loaderInfo_onProgress);
		Lib.current.addEventListener (flash.events.Event.ENTER_FRAME, current_onEnter);
		#end
		
	}
	
	
	public function load ():Void {
		
		for (library in libraries) {
			
			bytesTotal += library.bytesTotal;
			
		}

Loader inside asset library (most projects has only one asset library):

github.com

openfl/lime/blob/develop/lime/utils/AssetLibrary.hx#L388


	
	
	public function list (type:String):Array<String> {
		
		var requestedType = type != null ? cast (type, AssetType) : null;
		var items = [];
		
		for (id in types.keys ()) {
			
			if (requestedType == null || exists (id, type)) {
				
				items.push (id);
				
			}
			
		}
		
		return items;
		
	}

loadXXX() methods inside AssetLibrary used to load each individual asset.

Font loader:

github.com

openfl/lime/blob/develop/lime/text/Font.hx#L463


			
			name = cast NativeCFFI.lime_font_get_family_name (src);
			
		}
		
		#end
		
	}
	
	
	private function __loadFromName (name:String):Future<Font> {
		
		var promise = new Promise<Font> ();
		
		#if (js && html5)
		
		this.name = name;
		
		var ua = Browser.navigator.userAgent.toLowerCase();
		var isSafari = (ua.indexOf(" safari/") >= 0 && ua.indexOf(" chrome/") < 0);

About Safari: it looks like that Safari supports font loading events, but actually not. It reports that font is loaded when font isn’t actually loaded, so for Safari we use old-school font loader. I see that vizanto fixed it for system fonts (like Arial), so now it should work correctly for any font.

Maybe something wrong with font name (for example it contains "'" character)? Try to put trace(name) here: https://github.com/openfl/lime/blob/develop/lime/text/Font.hx#L493

hopewise · February 15, 2017, 4:36am

Thanks for detailed answer, I have found the font that failed to load ini Safari, it was StrVar.ttf I have removed it from project, and now its loading fine in Safari

singmajesty · February 15, 2017, 5:45pm

Sorry for the trouble, I should add a verbose mode for the asset loading so this is easier to debug

singmajesty · February 15, 2017, 8:55pm

I just added it:

Using openfl test html5 -v will now print verbose console messages to help give better information about what has loaded, and what has not, so we won’t be so confused if this occurs in the future

hopewise · February 16, 2017, 7:05am

that’s very useful, great