JavaScript Components Package CSS image

JavaScript Component Packaging Mode

JS components usually with CSS image, but this may be a little trouble to use, in order to allow the component enough solo, with the CSS image also packaged in the idea of JS, and then by the way to the number of requests less, this by the way seems more important, hehe.

So how to pack it, although there are resource-packages such a scheme, but our core users are still playing IE6 this fashion browser!

My program:

• CSS: CSS can be as a string exists in JS, and by JS dynamically added to the page, the page may not fit, but the component will not usually affect.
• image: CSS used in the picture with Datauri (RFC 2397) and MHTML (RFC 2557) of the way into the JS inside. (Qin Ge wrote Datauri and MHTML still recommended to do not know what dongdong students to see). CSS if you want to absolute path can also save Js,js if there is a direct use of the theory can also be, but JS usually only change classname will be better.
• Flash: Some relatively small flash, such as storage, copy, etc. can also choose to pack, but now the rice to solve the problem of non-ie, not ie use outside the chain bar

Here's an example of a packaged test.

Some detail and tangle of places

1. All the pictures are packaged into JS is not necessarily reasonable, packaged in should be required pictures.
   The exclusion of the picture is to make another bag good or directly with the picture?
2. Pictures can be pressed first, I choose the image compression tool is pngout, and is generally used -s5 .
   Someone did some testing uncompressed data in base64? Probably not, we judge by ourselves.
3. Duplicate picture quote directly with Datauri will make a lot of big, gzip and stupid like a pig will not pressure off.
   I choose to save into a JS variable, Taobao classmate is the way to raise class
4. MHTML in Ie7+/vista missing end separator can not be displayed, win03sp2 lack Content-Type of security prompts, reasons are not standard MIME, not everything can be province.
5. is to choose to pack everything in one file or press MHTML and Datauri type to pack into two copies in the server by the UA file or by the class Library intelligence to read, as if the latter is more harmonious.
6. SWF with Datauri into a problem, said FP8 no problem, now all FP10.
   Another solo program is to package JS to SWF, but it feels discordant

multipart/related Example

It's not standard, but it can run, and it's also important to change lines.

content-type:multipart/related;boundary= "_baidu_youa_bb_yep"

--_baidu_youa_bb_yep
Content-type:image/png
Content-location:logo.png
Content-transfer-encoding:base64

... base64 ...

--_baidu_youa_bb_yep
Content-type:image/png
Content-location:nono.png
Content-transfer-encoding:base64

... base64 ...

--_baidu_youa_bb_yep--

BTW: In the comments of the last article, I found this packed station, the output interface is very handsome