预加载图片
1 //定义预加载图片列表的函数(有参数) 2 jQuery.preloadImages = function(){ 3 //遍历图片 4 for(var i = 0; i<arguments.length; i++){ 5 jQuery("<img>").attr("src", arguments[i]); 6 } 7 } 8 // 你可以这样使用预加载函数 9 $.preloadImages("images/logo.png", "images/logo-face.png", "images/mission.png");
我可以用预加载的方法,做一些单页面图片量比较大的网站,比如一些电商网站,如果一次性加载所有图片,会影响加载速度,这样会造成用户体验很差。
我们可以用上面的预加载函数处理这个问题。
逻辑:
1.首次加载页面,传入一部分参数(这里的参数就是图片路径);
2.当窗口视图滑动到上次加载的最后一张图片时,再传入另一部分参数;
3.这样反复传递参数,只要用户窗口视图到达上一次传入图片的最后时,就传递下一次要加载的参数;
4.这样就不会造成不必要的资源浪费(没必要一次性加载所有图片,有可能用户不会浏览所有图片);