JS 修改img的src属性|极客笔记

JS 修改img的src属性

在网页开发中，经常会遇到需要通过JavaScript来动态修改页面中的元素属性的情况。其中，修改图片的src属性是比较常见的操作之一。通过修改img元素的src属性，我们可以实现图片的切换、加载等功能。

本文将详细介绍如何使用JavaScript来修改img的src属性，以及一些常见的应用场景和注意事项。

1. 获取img元素

在进行img的src属性修改之前，首先需要获取到对应的img元素。可以通过document.getElementById()、document.getElementsByClassName()、document.querySelector()等方法来获取元素。

下面是一个简单的示例，通过id来获取img元素：

<img id="myImg" src="img1.jpg" alt="image">

let img = document.getElementById("myImg");

2. 修改img的src属性

获取到img元素后，就可以通过JavaScript来修改其src属性了。只需要给src属性赋上新的图片链接即可。

下面是一个示例代码，实现了点击按钮切换图片的功能：

<img id="myImg" src="img1.jpg" alt="image">
<button onclick="changeImage()">Change Image</button>

<script>
function changeImage() {
  let img = document.getElementById("myImg");
  if (img.src.endsWith("img1.jpg")) {
    img.src = "img2.jpg";
  } else {
    img.src = "img1.jpg";
  }
}
</script>

在这段代码中，点击按钮时会切换img元素的图片，实现了动态修改src属性的效果。

3. 注意事项

在修改img的src属性时，有一些注意事项需要我们注意：

图片路径：确保新设置的src路径是有效的，否则图片无法正常加载显示。
事件触发：确保在合适的时机修改src属性，比如点击按钮、定时器触发等。
兼容性：尽量避免直接操作DOM元素，可以考虑使用框架或库来操作元素，提高兼容性和可维护性。

4. 实际应用

通过修改img的src属性，我们可以实现一些有趣和实用的效果，比如图片轮播、懒加载、预览等。接下来简要介绍一下这些应用：

4.1 图片轮播

通过定时器来不断修改img的src属性，可以实现简单的图片轮播效果。下面是一个示例代码：

<img id="myImg" src="img1.jpg" alt="image">

<script>
let img = document.getElementById("myImg");
let images = ["img1.jpg", "img2.jpg", "img3.jpg"];
let index = 0;

setInterval(function() {
  img.src = images[index];
  index = (index + 1) % images.length;
}, 2000);
</script>

4.2 图片懒加载

在页面滚动时，可以动态修改img的src属性，实现图片懒加载的效果。下面是一个简单的示例代码：

<img id="myImg" src="placeholder.jpg" data-src="realimage.jpg" alt="image">

<script>
window.addEventListener("scroll", function() {
  let img = document.getElementById("myImg");
  let rect = img.getBoundingClientRect();

  if (rect.top < window.innerHeight) {
    img.src = img.getAttribute("data-src");
  }
});
</script>

4.3 图片预览

当用户点击某个图片时，可以动态修改另一个img元素的src属性，实现图片预览效果。下面是一个简单的示例代码：

<img id="myImg" src="img1.jpg" alt="image">
<img id="previewImg" src="img1.jpg" alt="preview">

<script>
let img = document.getElementById("myImg");
let previewImg = document.getElementById("previewImg");

img.addEventListener("click", function() {
  previewImg.src = img.src;
});
</script>