图片预加载没有生效

[Zephylaci]

载入的时候有微妙的延迟，我看了眼代码，是先用img src下载图片再初始化，但是初始化并没有用到缓存的文件，于是造成了微妙的延迟，不知道是不是我浏览器兼容性的问题，看F12的NetWordk中图片的确是先加载完毕了，但是初始化的时候又去下了同样的图片一次，也就是虽然预下载了但是并没有用预下载的图片。
可以想到的原因大概就是，Live2d.js中的初始化方法并没有加判断而是直接请求的对应模型图片地址，而浏览器不一定会去读缓存造成的，但是Live2d.js并没有map文件...想跟还是想改都没有办法

[Zephylaci]

我找了个曲线救国的方案..写一个定时器，不断的输出canvas画布中图片的base64的长度，当大于10000时显示...基本没问题..就是有点不能释然...看看有没有别的解决方案..

[fish99]

我也是没有图片显示,求大佬分享下曲线救国的代码

[Zephylaci]

@fish99
启动代码，我改成这样了，这个样子还一个好处可以换自己喜欢的模型，而需要修改的部分很少...

		var model = "model/histoire/model.json";
		loadlive2d("live2d", message_Path+model);
		var askOver = setInterval(function(){
			var imgData = $('#live2d')[0].toDataURL("image/png").length
			if(imgData>100000){
				clearInterval(askOver);
				showLive2d();	
			}
		},1000)

        function showLive2d(){
            var live2dhidden = localStorage.getItem("live2dhidden");

            if(live2dhidden==="0"){
                setTimeout(function(){
                    $('#open_live2d').fadeIn(200);
                },1300);
            }else{
                setTimeout(function(){
                    $('#landlord').fadeIn(200);
                },1300);
            }
            initLive2d ();
        }
    });

[eeg1412]

@fish99
启动代码，我改成这样了，这个样子还一个好处可以换自己喜欢的模型，而需要修改的部分很少...

		var model = "model/histoire/model.json";
		loadlive2d("live2d", message_Path+model);
		var askOver = setInterval(function(){
			var imgData = $('#live2d')[0].toDataURL("image/png").length
			if(imgData>100000){
				clearInterval(askOver);
				showLive2d();	
			}
		},1000)

        function showLive2d(){
            var live2dhidden = localStorage.getItem("live2dhidden");

            if(live2dhidden==="0"){
                setTimeout(function(){
                    $('#open_live2d').fadeIn(200);
                },1300);
            }else{
                setTimeout(function(){
                    $('#landlord').fadeIn(200);
                },1300);
            }
            initLive2d ();
        }
    });

方法是不错，就是消耗点性能。

[Zephylaci]

@eeg1412
其实消耗不了多少...一秒一次，一般不会超过十次，取决于网速....
后面我发现，有的时候明明有图像但是toDataURL 取不到内容..所以加个限制 ，最多轮询8次无论渲染与否直接显示...
实在追求性能其实可以改live2d.js...把它格式化后6284行，有一个stopAllMotions，这个函数会在所有得模型文件加载完毕时触发，把showLive2d写在全局，然后在这里调用几乎不会有延时...模拟3G网络载入也没问题...

[eeg1412]

@eeg1412
其实消耗不了多少...一秒一次，一般不会超过十次，取决于网速....
后面我发现，有的时候明明有图像但是toDataURL 取不到内容..所以加个限制 ，最多轮询8次无论渲染与否直接显示...
实在追求性能其实可以改live2d.js...把它格式化后6284行，有一个stopAllMotions，这个函数会在所有得模型文件加载完毕时触发，把showLive2d写在全局，然后在这里调用几乎不会有延时...模拟3G网络载入也没问题...

大佬，学习到了！

[hanzerruid]

@fish99
启动代码，我改成这样了，这个样子还一个好处可以换自己喜欢的模型，而需要修改的部分很少...

		var model = "model/histoire/model.json";
		loadlive2d("live2d", message_Path+model);
		var askOver = setInterval(function(){
			var imgData = $('#live2d')[0].toDataURL("image/png").length
			if(imgData>100000){
				clearInterval(askOver);
				showLive2d();	
			}
		},1000)

        function showLive2d(){
            var live2dhidden = localStorage.getItem("live2dhidden");

            if(live2dhidden==="0"){
                setTimeout(function(){
                    $('#open_live2d').fadeIn(200);
                },1300);
            }else{
                setTimeout(function(){
                    $('#landlord').fadeIn(200);
                },1300);
            }
            initLive2d ();
        }
    });

请问dalao是改的哪一个文件的哪一段位置？

[Zephylaci]

@hanzerruid

Live2dHistoire/live2d/js/message.js

Line 448 in 426ef91

var AIimgSrc = [

从这里开始是初始化的入口...