Ruby, script generador de script javascript para precarga de imágenes en tu html
El truco más sencillo para precargar las imágenes de tu web y así no ver el horrible efecto de mouse-over hueco es hacer un script javascript como este:
img1 = new Image(); img1.src="imagen.jpg";
Esto invocará la imagen y el navegador, sino es muy tonto, la dejará en la caché para cuando verdaderamente la necesite.
Bueno, pues es lo que quiero hacer para una web que tiene un montón de background-image definidos en su css.
Para ello me he hecho un script en ruby que me busca todas las imágenes en todos los css y me genera un script de javascript con todo el rollito de los preload.
class Preloator def self.generate_script( css_directory ) # take all .css on directory css_file_names = [] Dir.foreach( css_directory ) do |file| if file =~ /.*\.css$/ css_file_names << css_directory + '/' + file end end # take all the images by looking at 'url' image_names = [] css_file_names.each do |file_name| self.grep( 'url', file_name ).each do |line| image_names << line.scan( /.*\((.*)\)/ ).flatten.first end end # generate the script script = "<script>\n" image_names.each_with_index do |image_name, index| script += " img#{index} = new Image();\n" script += " img#{index}.src = \"#{image_name}\";\n" end script += "</script>" end def self.grep( pattern, filename ) matches = [] regexp = Regexp.new( pattern ) File.open(filename) do |file| file.each do |line| matches << "#{filename} #{file.lineno.to_s}: #{line}" if regexp.match(line) end end matches end end puts Preloator.generate_script( ARGV[0] )
Esto genera una salida como esta:
$ ruby etc/preloator.rb public/stylesheets/ <script> img0 = new Image(); img0.src="/imgs/fondo.jpg"; img1 = new Image(); img1.src="/imgs/fondo_carpeta.png"; img2 = new Image(); img2.src="/imgs/blog_sombra_abajo.png"; img3 = new Image(); </script>;
Seguramente quieras mejorarlo un poquito: meterlo en un .js o invocarlo cuando el document.load.
El script ahorra trabajo si, como en mi caso, tienes más de 20 imágenes en el css.. y escribir el javascript a mano sería un coñazo.
