image元素的src属性值与getAttribute('src')值

采集的时候,当采集到一些不可用的照片就将其剔除掉

我的解决思路是new一个img对象, 然后将采集过来的图片赋值给这个img, 然后分别处理img的onerror和 onload,

当在onerror里面剔除这张图片, 却发现有张图片怎么都剔除不掉,然后就发现直src的值和原始值不一样

接下我就做了个例子,代码如下:

var url  = 'http://pic.hao123.comArray/{*#@$out.push(format.escape(format.htmlEncode(pic.picurl)));*}';
var img = new Image();
 
img.onerror = function(){
    console.log('src:', img.src);
    console.log('attr:', img.getAttribute('src'));
};
 
img.onload = function(){
    console.log('src:', img.src);
    console.log('attr:', img.getAttribute('src'));
};
 
img.src = url;

运行后输出的结果:

这个是输出的结果,是不是发现两个结果不一样,

其实为了防止src的值影响到页面, 浏览器将一些特殊字符串都进行了转义,所以才导致输出的结果不一致.

结论: 属性的值并不一定等于getAttribute的值,所以尽量使用原生的方法获取属性的值.

在网上搜了下,下面这篇博客写比较详细

http://blog.csdn.net/fudesign2008/article/details/7620985