Question

为什么这不起作用？（ http://jsfiddle.net/J8n2g/ ）：

$('body')
  .append($('<img>')
  .attr({
    'src': 'http://www.google.com/intl/en_ALL/images/logo.gif', 
    'width': '100%', 'height': '100%' })
  .hide()
  .load(function() { $(this).show(); }));`

虽然效果很好（ http://jsfiddle.net/J8n2g/1/ ）：

$('body')
  .append($('<img width="100%" height="100%">')
  .attr({ 'src': 'http://www.google.com/intl/en_ALL/images/logo.gif' })
  .hide()
  .load(function() { $(this).show(); }));

Answer 1

编辑：经过jQuery代码的重新思考和调试后，我得到了更多信息。 jQuery attr函数有一些代码来捕获'height'变化并将它们传递给'height'函数。但是这不会正常触发。请注意，这一切都有效：

// 'this' refers to the img element (ie inside the .load function)
$(this).height('100%');
$.attr(this, 'height','100%', 1);  // 1 sets 'pass' to true -> the height IS called
$(this)['height']('100%');

虽然这不起作用：

$(this).attr('height','100%');

后者（在一些ifs和thens之后的jQuery代码中）归结为：

elem[ name ] = value;
// Where:
// elem = the image dom element
// name = 'height'
// value = '100%'

显然失败了......

我之前发布的原始假设（错误）：我认为jQuery正在将高度attr解释/解析为整数..％是'问题'然后，因为在第一个例子中使用固定像素大小确实有效（就像使用'10 .1'）。

顺便说一下，这也有效：

$('body')
 .append($('<img>')
 .attr({ 'src': 'http://www.google.com/intl/en_ALL/images/logo.gif',
         'style':'height: 100%; width: 100%'})
 .hide()
 .load(function() { $(this).show();} ));

Answer 2

在第一个示例中，当您操作属性时，尚未在DOM中。在第二个示例中，当您尝试更改src属性时，您已将其添加到DOM中。

属性未设置

2 个答案: