预加载图片

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.这样就不会造成不必要的资源浪费(没必要一次性加载所有图片,有可能用户不会浏览所有图片);

原文地址:https://www.cnblogs.com/yesw/p/4171954.html