Question

我正在使用外部API，允许我在图像src值内发送额外参数，如此

<img src="myImage.jpg?resize=width[scrW]">

问题是，在我开始加载页面之前，我不知道宽度变量（ scrW ）是什么。我使用<script> var scrW = window.innerHtml </script>来获得我需要的宽度。

我尝试使用

<script> 
    document.write('<img src="myImage.jpg?resize=width['+window.innerHtml+']">')
</script>

但问题是document.write在文档准备好之前显示文本中的所有内容（或到达</body> ）。这看起来很俗气。

我的问题是：如何在页面呈现期间将JS变量附加/预置到src attribut值？

Answer 1

如何解决在页面呈现之前显示的文本问题？这很容易。只需确保您的代码无法运行，直到页面的HTML完全加载。

WideImage：

<script>
// self executing function here
(function() {
   // your page initialization code here
   // the DOM will be available here
   document.write('<img src="myImage.jpg?resize=width['+window.innerHtml+']">');
})();
</script>

使用jQuery：

<script>
$(document).ready(function() {
  document.write('<img src="myImage.jpg?resize=width['+window.innerHtml+']">');
});
</script>

Answer 2

如何给你的图像src一些默认的调整大小值，当页面加载时它将被更新。我给了img一个id为“myImage”的id，以便我可以在JavaScript代码中访问它。

这是HTML：

<img id="myImage" src="myImage.jpg?resize=width[180]">

最后插入此JavaScript：

<script>var scrW = window.innerHTML;
document.getElementById("myImage").src = "myImage.jpg?resize=width["+scrW+"]";</script>

使用JS如何更改HTML标记属性（document.write（）的替代方法）

2 个答案: