Entries Tagged ‘image’:

Image Grabber Booklet

代码:

var o = "<ol>", bd = document.body;
bd.innerHTML.replace(
        /(<img[^>]*)(src *= *("[^"]*"|'[^']*'|[^ >]*))/ig,
        function(m, t, c, src) {
            t = src; c = src.charAt(0);
            if (c == '"' || c == "'") t = t.slice(1, -1);
            o += "<li>" + t + " <img src=" + src + " /></li>";
        });
bd.innerHTML = o + "</ol>";

Booklet 添加页面:img-src-regexp-test.html(WordPress 的过滤好讨厌,只好放在独立页面里)

针对该功能,更简单明了的思路是用 getElementsByTagName(“img”) 来实现,但性能不如正则。

Tags: , , ,

图片的HTTP请求(续)

上一篇中,很多朋友在回复中提到了一些更有意思的现象,忍不住继续挖掘一番:

10. IE6下的背景闪烁bug

这个bug久闻其名,但我自己从来没遇到过。纳闷了许久,后来才发现,这是一个非典型性甚至可以忽略的bug. 因为它的触发条件离普通用户很远:

The cause of flickering is choosing “Every visit to page” in Tools » Internet Options… » Temporary Internet Files » Settings…

Selecting anything other than “Every visit to page” will fix all flickering. Fortunately, the means that the flicker problem plagues developers far more than your common user.

只有IE的缓存选项设置为“Every visit to page”时,才会触发。普通用户的默认设置是“Automatically”, 不会遇到此问题。因此继续往下阅读之前 阅读全文 »

Tags: , , , ,

图片的HTTP请求

请在主流浏览器中打开测试页面,在Fiddler里查看http请求。

1. 隐藏图片

<img src="1.jpg" style="display: none" />

测试:test_1.html
结论:只有Opera不产生请求。
注意:用visibility: hidden隐藏图片时,在Opera下也会产生请求。

2. 重复图片

<img src="1.jpg" />
<img src="1.jpg" />

测试:test_2.html
结论:所有浏览器都只产生一次请求 阅读全文 »

Tags: , ,