The background,

While working, I encountered a requirement to send a GET request using the SRC attribute of the IMG tag. The original idea was that img’s onLoad callback would be triggered when the request was successfully sent, and IMG’s onError callback would be triggered if the request failed. But the ideal is full, the reality is very skinny…

Second, the practice

1. Write test demo

First, write a demo, create an IMG tag dynamically using JS, then assign the interface address to the SRC attribute, initiate the request, and set up the onload and onError callback functions.

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
</head>
<body>
  <script type="text/javascript">
    window.onload = function() {
      const img = document.createElement('img')
  		img.onload = function(e) {
        console.log(e, 'success')
      }
      img.onerror = function(e) {
        console.log(e, 'fail')
      }
      img.src = 'http://localhost:3000/get'
      img.style.width = '100px'
      img.style.height = '100px'
      img.style.display = 'none'
   
      document.body.appendChild(img)
    }
  </script>
</body>
</html>
Copy the code

Here is my express to write a simple GET request interface to assist the test, the code is as follows:

const express = require('express')

const app = express()

app.get('/get'.function(request, response){
       
  const data = {
    'name':'Joe'.'age': 24
  }

  console.log(data)
  response.json(data)
})

app.listen(3000.() = > {
  console.log('http://localhost:3000/get')})Copy the code
2. Test results

After testing, img’s onLoad callback cannot be triggered even if the request succeeds. Whether the request succeeds or fails (the interface actively throws an error to fail the request, or requests a nonexistent interface to fail the request), the onError callback is triggered. And the browser will throw a warning:

Cross-Origin Read Blocking (CORB) blocked cross-origin response http://localhost:3000/get with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

Combining the onLoad definition (the onLoad event is executed immediately after the image is loaded), you can see that the request was indeed successful and returned data, but IMG cannot handle data formats other than the image, so the onLoad callback is never triggered, even if the request was successful. When you change the value of the SRC attribute to a normal image address, the onload will fire normally.

3. Try again and fail

Since IMG can only send a one-way GET request and cannot access the response content, it is not feasible to use onLoad and onError to determine the success or failure of the request. The HTMLImageElement also has a read-only attribute called complete, which is a Boolean value indicating whether the image has been fully loaded. When I saw the definition indicating whether the image was completely loaded, I was quite disappointed. I was afraid that it could not meet my requirements, but I still tested it with the idea of trying, so I added the complete attribute in the original code:

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
</head>
<body>
  <script type="text/javascript">
    window.onload = function() {
      const img = document.createElement('img')
  		img.onload = function(e) {
        console.log(e, 'success')
        console.log(img.complete)
      }
      img.onerror = function(e) {
        console.log(e, 'fail')
        console.log(img.complete) // true
      }
      img.src = 'http://localhost:3000/get'
      img.style.width = '100px'
      img.style.height = '100px'
      img.style.display = 'none'
   		
   		console.log(img.complete) // false
   		
      document.body.appendChild(img)
    }
  </script>
</body>
</html>
Copy the code

The result is that whether the request succeeds or fails, it will trigger onError, and the value of complete printed in onError is also true. Doesn’t the definition say that the value of complete is true when the image is fully loaded? If the request succeeds, it will be true. If the request fails, it will also be true. If there is a god passing by, I hope to help answer it, little brother here thank you!

To sum up, especially with this article record