预加载
#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; } #preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; } #preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }作者:编程小飞侠 链接:http://www.jianshu.com/p/f8022faf9535 來源:简书 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }
将这三个ID选择器应用到(X)HTML元素中,我们便可通过CSS的background属性将图片预加载到屏幕外的背景上。只要这些图片的路径保持不变,当它们在Web页面的其他地方被调用时,浏览器就会在渲染过程中使用预加载(缓存)的图片
懒加载
在开发中,当程序中需要利用的资源时,在程序启动的时候不加载,只有在运行当需要这些资源的时候再去加载这些资源。
只有当真正需要资源的时候,再去加载,节省了内存资源。