jquery 预加载
jQuery 预加载的实现方法
预加载通常指在页面资源（如图片、脚本等）实际需要之前提前加载，以提升用户体验。以下是几种常见的jQuery预加载实现方式：
使用jQuery预加载图片
$.preloadImages = function() {
for (var i = 0; i < arguments.length; i++) {
$('<img>').attr('src', arguments[i]);
}
};
// 调用示例
$.preloadImages('image1.jpg', 'image2.jpg', 'image3.png');通过CSS隐藏预加载元素
$(document).ready(function() {
$('<div id="preloader" style="display:none;"></div>').appendTo('body');
var images = ['img1.jpg', 'img2.png', 'img3.gif'];
$.each(images, function(index, value) {
$('#preloader').append($('<img>').attr('src', value));
});
});使用jQuery.Deferred实现异步预加载
function preloadImages(urls) {
var deferreds = [];
$.each(urls, function(i, url) {
deferreds.push(
$.Deferred(function(deferred) {
var img = new Image();
img.onload = function() { deferred.resolve(); };
img.onerror = function() { deferred.reject(); };
img.src = url;
}).promise()
);
});
return $.when.apply($, deferreds);
}
// 调用示例
preloadImages(['a.jpg', 'b.png']).done(function() {
console.log('所有图片预加载完成');
});页面加载时预加载资源
$(window).on('load', function() {
// 预加载下一页可能需要的资源
var nextPageResources = [
'next-page.css',
'next-page.js',
'next-page-banner.jpg'
];
$.each(nextPageResources, function(i, res) {
$('<link>', {rel: 'preload', href: res, as: res.split('.').pop()}).appendTo('head');
});
});预加载的最佳实践
- 优先预加载首屏关键资源
- 避免一次性预加载过多资源导致带宽竞争
- 对移动端用户考虑流量消耗问题
- 可以结合浏览器原生
<link rel="preload">特性 - 对SPA应用可预加载可能访问的路由资源
性能优化建议
预加载实现时应注意内存管理，特别是大量图片预加载时。可以通过以下方式优化：
// 限制并发预加载数量
var MAX_CONCURRENT = 3;
var currentLoading = 0;
var queue = [];
function loadNext() {
if (currentLoading < MAX_CONCURRENT && queue.length) {
currentLoading++;
var url = queue.pop();
$('<img>').attr('src', url).on('load error', function() {
currentLoading--;
loadNext();
});
loadNext();
}
}
function preloadWithLimit(urls) {
queue = urls.concat();
loadNext();
}以上方法可根据实际项目需求组合使用，实现高效的资源预加载策略。
