Componentes JS geralmente vêm com imagem css, mas pode ser um pouco problemático usá-lo dessa forma. Para tornar o componente solo o suficiente, tive a ideia de empacotar a imagem css em js e então. a propósito, reduzir o número de solicitações. Isso parece ser mais importante.
Então, como empacotar? Embora existam soluções como pacotes de recursos , nossos principais usuários ainda usam navegadores modernos como o ie6!
Minha solução:
- CSS : CSS pode ser armazenado em js como uma string e adicionado dinamicamente à página por js. A página pode não ser adequada para uso, mas o componente geralmente não será afetado.
- imagem : As imagens usadas em CSS são compiladas em js usando dataURI ( RFC 2397 ) e MHTML ( RFC 2557 ). ( dataURI e MHTML escritos por Qin Ge ainda são recomendados para estudantes que não sabem o que são). Se você deseja um caminho absoluto em CSS, também pode salvar js. Se js for usado diretamente, é teoricamente possível, mas geralmente é melhor apenas alterar o className de js.
- flash : Alguns flashes relativamente pequenos, como armazenamento, cópia, etc., também podem ser empacotados. No entanto, agora podemos resolver o problema do não-IE. Para não-IE, use links externos.
Aqui está um exemplo de teste de embalagem .
Alguns detalhes e emaranhados
- Não é necessariamente razoável empacotar todas as imagens em js. O que é empacotado devem ser as imagens que devem ser usadas.
Então é melhor empacotar as fotos excluídas em outro pacote ou usar as fotos diretamente? - As imagens podem ser compactadas primeiro e depois editadas. A ferramenta de compactação de imagens que escolho é pngout e geralmente uso
-s5 .
Alguém fez alguns testes em base64. Provavelmente não , cada um pode fazer seu próprio julgamento. - As referências repetidas de imagens serão muito grandes se você usar o dataURI diretamente, e o gzip é tão estúpido quanto um porco e não o compactará.
Eu escolho salvá-lo como uma variável js, enquanto meus colegas no Taobao usam o método de classe. - O MHTML não pode ser exibido no ie7+/vista devido à falta do delimitador final. O Win03sp2 não possui
Content-Type e causará avisos de segurança. - Devo optar por empacotar tudo em um arquivo ou empacotá-lo em dois arquivos de acordo com os tipos MHTML e dataURI e enviar o arquivo de acordo com ua no servidor ou lê-lo de forma inteligente pela biblioteca de classes. Parece que o último é mais harmonioso.
- Há um problema ao usar dataURI para compilar swf. Diz-se que não há problema com o FP8, mas agora é o FP10.
Outra solução individual é empacotar js em swf, mas parece desarmônico.
exemplo multiparte/relacionado
Não é padrão, mas pode ser executado. Quebras de linha também são muito importantes.
Tipo de conteúdo:multipart/relacionado;boundary="_BAIDU_YOUA_BB_YEP"
--_BAIDU_YOUA_BB_YEP
Tipo de conteúdo: imagem/png
Localização do conteúdo:logo.png
Codificação de transferência de conteúdo: base64
...base64...
--_BAIDU_YOUA_BB_YEP
Tipo de conteúdo: imagem/png
Localização do conteúdo:nono.png
Codificação de transferência de conteúdo: base64
...base64...
--_BAIDU_YOUA_BB_YEP--
