Javascript img src path changes, with without id (get/setAttribute)

Lionsure 2020-05-17 Original by the website

In the process of developing the website, the src of img is set in advance. Generally speaking, this property is rarely modified. The preset image is displayed directly when the website is loaded. However, if the webpage requires loading images when scrolling (dynamically loading pictures), that is, all images in the webpage are not displayed at once, and the images that enter the screen area are displayed when the screen is scrolled. This not only reduces the number of requests to the server, but also greatly saves server traffic.

Scroll the screen to load the image. Set the src attributes of all images to be dynamically displayed in the web page to a small image. Set the src attribute to the path of target image when the target image is to be displayed. In this way, the user can view a image and display a image, and a webpage with a large number of images can greatly save traffic.

 

I. Javascript img src path is got (getAttribute)

In the process of setting and changing the src attribute of img, it is indispensable to get the path of image, that is, to get the src attribute of img. There are two ways to get it. One is to use the getAttribute method; the other is to directly use the src of image object. Examples of the two methods are as follows:

Use image objects in examples:

<img id="imgid" src="/images/tempimg.jpg" tSrc="/images/realimg.jpg" alt="Javascript img src path is got by getAttribute" />

 

Method 1: Javascript img src path is got by getAttribute

var obj = document.getElementById("imgid");
       var imgSrc = obj.getAttribute("src");
       var realSrc = obj.getAttribute("tSrc");

The getAttribute() method can get not only the src attribute of img, but also the tSrc attribute that is not inherent to img. This method has stronger acquisition capabilities, but older browsers with lower versions (such as ie6) do not support it.

 

Method 2: Get the src attribute of img directly

var obj = document.getElementById("imgid");
       var imgSrc = obj.src; // Can get
       var realSrc = obj.tSrc; // Prompt undefined, that is, the tSrc attribute is not defined and cannot be got

 

 

II. Change img src with javascript (setAttribute)

Change the src attribute of img also has two methods as the same as getting in javascript; one is to use the setAttribute method; the second is to directly get the src attribute according to the image object. Examples of the two methods are as follows:

Use image objects in examples:

<img id="imgid" src="/images/tempimg.jpg" tSrc="/images/realimg.jpg" alt="jChange img src with javascript" />

 

Method 1: Change img src with setAttribute in javascript

var obj = document.setElementById("imgid");
       var imgSrc = obj.setAttribute("src", tSrc); // Change the path of image to the target path
       var realSrc = obj.setAttribute("tSrc", src);// Temporarily save the image path to tSrc

Using the setAttribute method, whether it is to modify the src attribute or set the tSrc attribute is valid, but older browsers (such as ie6) do not support it, and only browsers above ie8 do.

 

Method 2: Set the src attribute of img directly

var obj = document.getElementById("imgid");
       obj.src = imgSrc; // Can be set
       obj.tSrc = realSrc; // Prompt undefined, that is, the tSrc attribute is not defined, and the setting fails

 

 

III. How to set img src in javascript without id

Html: 

<img src="/images/tempimg.jpg" tSrc="/images/realimg.jpg" alt="How to set img src in javascript without id" />

 

Javascript code: 

<script type="text/javascript">
              function ChangeImgSrcWithoutId() {
                     var arrImg = document.images;
                     for (var i = 0; i < arrImg.length; i++) {
                            if (arrImg[i].getAttribute("tSrc") != undefined) {
                                   arrImg[i].src = arrImg[i].getAttribute("tSrc");
                            }
                     }
              }
              ChangeImgSrcWithoutId(); // Call
       </script>