Hi, this is a feature that can save web traffic when loading image

README.md

@@ -9,12 +9,13 @@
 
 ## How it works
 
-There are 4 ways to use `retina.js`:
+There are 5 ways to use `retina.js`:
 
 1. Automatically swapping out `src` paths on `img` tags.
 2. Automatically swapping out background image URLs in inline styles.
 3. Manually specifying the location of a high-res image variant (works for `src` attributes and inline styles).
 4. Automatically creating media queries for CSS background images.
+5. [new feature - 20200315 added]only load image once for elememnts that have attribute: `data-rjs-src` and `src` is empty
 
 #### Img Tags
 
@@ -25,7 +26,7 @@ With this in mind, you'll specify your highest environment level with the `data-
 Let's say you have an image on your page that looks like this:
 
 ```html
-<img src="/images/my_image.png" data-rjs="3" />
+<img src="/images/my_image.png" data-rjs="3" />~~~~~~~~
 ```
 
 In this case, we've set our resolution cap at "3", denoting that we've prepared 3x and 2x image variants. When the page loads, `retina.js` will check the actual resolution of the device environment to decide whether it should really serve up a 3x image. If the user happens to be in a 2x environment, `retina.js` will serve up the 2x image instead, assuming it will find the image at `/images/my_image@2x.png`.

src/retina.js

@@ -159,6 +159,14 @@ function dynamicSwapImage(image, src, rjs = 1) {
   if (src && cap > 1) {
     const newSrc: string = src.replace(srcReplace, `@${cap}x$1`);
     setSourceIfAvailable(image, newSrc);
+  } else if (!src) {
+    const realSrc = image.getAttribute('data-rjs-src');
+    if (cap > 1) {
+      const newSrc: string = realSrc.replace(srcReplace, `@${cap}x$1`);
+      setSourceIfAvailable(image, newSrc);
+    } else {
+      setSourceIfAvailable(image, realSrc);
+    }
   }
 }