Ke ʻimi nei: Mea Hana Preview Leka uila pūnaewele

Ua ʻike anei ʻoe i ka nui o nā mea kūʻai aku leka uila i hoʻopaʻa i nā kiʻi a hōʻike i kahi huaʻōlelo ʻē aʻe? Makemake wau inā ua ʻike maoli kekahi i kēia hoʻopili ʻana me ka hoʻohana ʻana iā JavaScript a i ʻole ʻaoʻao ʻaoʻao. Makemake wau e kau lima ma kahi mea hana e hana ia. Ma hope o ka manawa, maopopo iaʻu hiki iaʻu ke hoʻomōhala i kahi ʻaoʻao ... ua hoʻomaka wau e pāʻani i kēia pō. Eia kahi hana e kāpae i kāu mau kiʻi āpau ma kahi ʻaoʻao:

hana e pani () // wehe i nā kiʻi
var imgs = document.getElementsByTagName ('img'); // array
no (var i = 0; i> imgs.length; i ++) // loop
imgs [i] .src = ""; // hoʻonoho i nā kiʻi i mea ʻole

He maʻalahi Javascript maʻalahi. ʻO ka mea mua aʻu e hana ai ʻo ka hōʻiliʻili i kahi kiʻi o nā kiʻi i loko HTML. ʻO kahi hoʻonohonoho kahi hui o nā huahana. Ua haʻi wau i ka javascript e kiʻi i kēlā me kēia meahana i loaʻa kahi img tag. (Pēlā ʻoe e hōʻike ai i nā kiʻi ma HTML). Ma hope e 'loop' ma o ka pūʻulu ma ka haʻi ʻana iā ia e hoʻomaka me ka mea mua (= 0), e hele no ka nui o nā mea ma laila (imgs. Lōʻihi), a ke pau me ka loop hoʻonui 1 e neʻe i ka mea aʻe. (i ++).

ʻO ka mea maʻamau ka hōʻiliʻili o ka pūʻulu i kahi o kēlā me kēia kiʻi ma ka ʻaoʻao, nā puka lou ma o lākou, a hoʻonohonoho i kēlā me kēia i mea ʻole. ʻO ka mea aʻu e makemake ai e hana me kēia, hemo i ke kiʻi akā hōʻike maoli i nā huaʻōlelo ʻē aʻe - e like me ka makemake o ka mea kūʻai leka uila. Makemake pū wau e hemo i nā papa ʻē aʻe a me nā mea div e hāʻawi iā ia e like me ke ʻano o nā mea kūʻai aku Mobile. E pani kēia i ka lepili kaila inline a me ka hōʻano font.

Ua ʻike a kūkulu paha kekahi i kekahi mea e like me kēia? Inā pēlā, e hoʻokuʻu iaʻu i kahi leka i kaʻu pepa pili. Inā kākau ʻia ma C # a i ʻole ʻo JavaScript paha, he mea paha i hiki iaʻu ke ʻae e kūʻai. ʻO ka maikaʻi o JavaScript hiki ke hoʻopau ʻia a ma ka hōʻeuʻeu - kahi hiʻohiʻona maikaʻi loa! I kēia manawa, e hoʻomau wau i ka hana ʻana iaʻu iho!


  1. 1

    That would be a really simple Greasemonkey javascript

    You’re almost there, just insert the alt tag as the nextSibling.

    then put it on 🙂

    You could also use Greasemonkey to XPI or whatever it is called to make it a proper standalone Firefox extension.

  2. 2

    Aloha Doug,

    ka Web Developer Toolbar has a tool for doing this specifically, called “Replace Images With Alt Attributes”. It does exactly what you want for free!

    It did throw up an accessibility issue with your site though. Turning images off leaves black text on a black background, so anyone surfing the web without images on won’t be reading your posts!


    .post { background-color:#fff; }

    should solve that without messing up your theme though.

    • 3

      Great find and catch, Phil! Thanks so much. I’m going to dig into this add-on a little deeper since I need some of that functionality in a page rather than the browser itself. Very cool!

      (I also updated my post class – thanks for pointing that out!)

  3. 4

    At we use a product called pvIQ from Pivotal Veracity ( that is a big help with your problem. We send our test emails to our various ISP test accounts and then pvIQ retrieves jpgs of the rendered emails from each of the accounts, as they would appear in different browsers. This saves us enormous amounts of time, as all we have to do is look at the resulting jpgs. I’d recommend it.

    • 5

      Helo Mark,

      Pivotal Veracity has some incredible tools! I know they’ve recently launched an API as well. I’m trying to do something a little simpler, just a ‘quick’ look that doesn’t require actually sending the email out. Imagine just a button to click and you can emulate how it would look, just to take care of the low-hanging fruit.


      • 6


        I haven’t looked at this for a while, so I might be wrong, but don’t the portals keep changing their mail rendering software? If they did, I would think you’d be constantly playing catch-up if you tried to use your own test software. That’s why we use pvIQ: it sends us exactly what the portal would render.


        • 7

          You’re absolutely correct. My thinking is simply developing a ‘quick & dirty’ previewer that someone could execute before sending to something like pvIQ… things like Alt tags and mobile previewing (tables removed, etc.). I definitely don’t want to try to keep up with the mess out there with Email Clients! Those folks at Pivotal Veracity are the pros at that!


  4. 8

    Something like this?

    var showImages = false;
    function toggleImages() {
    var imgs = document.getElementsByTagName("img");
    for (var i=0;i

  5. 9

    I think a potentially useful addition to your idea would be the ability to preview the emails in the same manner that popular email clients do. It would take some time and research into how each one does it (what elements to they strip, leave in, etc.).

    You build a series of filters to choose from. Say, a GMail filter, Yahoo Mail, Outlook (PC, Mac, etc.) filters, etc. So, instead of having to have dummy test accounts with every service under the sun, you could cycle through previews of each one relatively quickly.

    …maybe I’ve said too much… 😉

Pehea kou manaʻo?

Ke hoʻohana nei kēia pūnaewele i ka Akismet e ho'ēmi i ka spam. E aʻo pehea e hanaʻia ai kāuʻikeʻikepili.