Это полезный способ предварительной загрузки изображений CSS перед рендерингом анимации JavaScript / jQuery, например. Этот скрипт представляет собой небольшой плагин jQuery, который кэширует все изображения, на которые есть ссылки в связанных / импортированных файлах CSS (он выполняет итерацию по каждому правилу в каждой прикрепленной таблице стилей и, если значение правила содержит URL-адрес изображения, загружает изображение, таким образом обеспечивая его доступность в кэше. при использовании в документе.
Функция предварительной загрузки CSS-изображений
jQuery.preloadCssImages = function(){ var allImgs = [];//new array for all the image urls var k = 0; //iterator for adding images var sheets = document.styleSheets;//array of stylesheets for(var i = 0; i 0 && imgUrls != ''){//loop array var arr = jQuery.makeArray(imgUrls);//create array from regex obj jQuery(arr).each(function(){ allImgs[k] = new Image(); //new img obj allImgs[k].src = (this[0] == '/' || this.match('http://')) ? this : baseURL + this; //set src either absolute or rel to css dir k++; }); } }//loop return allImgs; }
jQuery.preloadCssImages = function(){ var allImgs = [];//new array for all the image urls var k = 0; //iterator for adding images var sheets = document.styleSheets;//array of stylesheets for(var i = 0; i 0 && imgUrls != ''){//loop array var arr = jQuery.makeArray(imgUrls);//create array from regex obj jQuery(arr).each(function(){ allImgs[k] = new Image(); //new img obj allImgs[k].src = (this[0] == '/' || this.match('http://')) ? this : baseURL + this; //set src either absolute or rel to css dir k++; }); } }//loop return allImgs; }
использование
//preload only $.preloadCssImages(); //load into array var preloadedImgs = $.preloadCssImages();