path control using js

Question

I found a script to use on my project and I edited for myself everything is ok but there is something that I have failed editing js (jquery) is about base path, script uses data-src-base for images path and I don't want to use this path because of path can be different for all images

script uses this

 <img data-src-base='http://yurtici.anitur.com.tr/musteri/ingoing/2017/htm/img/' data-src=""data-swapMe='<480:4.jpg,<768:3.jpg,<960:2.jpg,>960:1.jpg' class="lazyload" />

click to see on codepen

function makeImagesResponsive() {
    var e = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
        t = document.getElementsByTagName("body")[0].getElementsByTagName("img");
    if (t.length === 0) return;
    var n;
    t[0].hasAttribute ? n = function(e, t) {
        return e.hasAttribute(t)
    } : n = function(e, t) {
        return e.getAttribute(t) !== null
    };
    var r = window.devicePixelRatio ? window.devicePixelRatio >= 1.2 ? 1 : 0 : 0;
    for (var i = 0; i < t.length; i++) {
        var s = t[i],
            o = r && n(s, "data-swapMe2x") ? "data-swapMe2x" : "data-swapMe",
            u = r && n(s, "data-src-base2x") ? "data-src-base2x" : "data-src-base";
        if (!n(s, o)) continue;
        var a = n(s, u) ? s.getAttribute(u) : "",
            f = s.getAttribute(o),
            l = f.split(",");
        for (var c = 0; c < l.length; c++) {
            var h = l[c].split(":"),
                p = h[0],
                d = h[1],
                v, m;
            if (p.indexOf("<") !== -1) {
                v = p.split("<");
                if (l[c - 1]) {
                    var g = l[c - 1].split(/:(.+)/),
                        y = g[0].split("<");
                    m = e <= v[1] && e > y[1]
                } else m = e <= v[1]
            } else {
                v = p.split(">");
                if (l[c + 1]) {
                    var b = l[c + 1].split(/:(.+)/),
                        w = b[0].split(">");
                    m = e >= v[1] && e < w[1]
                } else m = e >= v[1]
            }
            if (m) {
                var E = a + d;
                s.src !== E && s.setAttribute("src", E);
                break
            }
        }
    }
}
if (window.addEventListener) {
    window.addEventListener("load", makeImagesResponsive, !1);
    window.addEventListener("resize", makeImagesResponsive, !1)
} else {
    window.attachEvent("onload", makeImagesResponsive);
    window.attachEvent("onresize", makeImagesResponsive)
};

aside{
  width:900px;
}
aside img{
  width:100%;
}

<html lang="en">

<head>
  <meta charset="UTF-8" />
</head>

<body>

<aside>
  <img alt='kitten!' data-src-base='http://yurtici.anitur.com.tr/musteri/ingoing/2017/htm/img/' data-src=""data-swapMe='<480:4.jpg,<768:3.jpg,<960:2.jpg,>960:1.jpg' class="lazyload" /> 
  
</aside>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

</html>

Can you put the code not minified? It is a bit confusing to get track of e,n,t,s,u,m,y,... — Sabaz
– Sabaz, Commented Feb 8, 2017 at 10:46

LPL · Accepted Answer · 2017-02-08 11:14:41Z

In the last statement in your for-loop you're adding the data-src-base attribute (which in your code is called 'a') to your src-attribute (which you set to 'E').

I've just removed the 'a' from 'E' at the end so you can see that the image will have attribute src="1.jpg" (if that's your screen size).

However, you should be able to remove other variables here that aren't used like u and a.

function makeImagesResponsive() {
    var e = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
        t = document.getElementsByTagName("body")[0].getElementsByTagName("img");
    if (t.length === 0) return;
    var n;
    t[0].hasAttribute ? n = function(e, t) {
        return e.hasAttribute(t)
    } : n = function(e, t) {
        return e.getAttribute(t) !== null
    };
    var r = window.devicePixelRatio ? window.devicePixelRatio >= 1.2 ? 1 : 0 : 0;
    for (var i = 0; i < t.length; i++) {
        var s = t[i],
            o = r && n(s, "data-swapMe2x") ? "data-swapMe2x" : "data-swapMe",
            u = r && n(s, "data-src-base2x") ? "data-src-base2x" : "data-src-base";
        if (!n(s, o)) continue;
        var a = n(s, u) ? s.getAttribute(u) : "",
            f = s.getAttribute(o),
            l = f.split(",");
        for (var c = 0; c < l.length; c++) {
            var h = l[c].split(":"),
                p = h[0],
                d = h[1],
                v, m;
            if (p.indexOf("<") !== -1) {
                v = p.split("<");
                if (l[c - 1]) {
                    var g = l[c - 1].split(/:(.+)/),
                        y = g[0].split("<");
                    m = e <= v[1] && e > y[1]
                } else m = e <= v[1]
            } else {
                v = p.split(">");
                if (l[c + 1]) {
                    var b = l[c + 1].split(/:(.+)/),
                        w = b[0].split(">");
                    m = e >= v[1] && e < w[1]
                } else m = e >= v[1]
            }
            if (m) {
                var E = d;
                s.src !== E && s.setAttribute("src", E);
                break
            }
        }
    }
}
if (window.addEventListener) {
    window.addEventListener("load", makeImagesResponsive, !1);
    window.addEventListener("resize", makeImagesResponsive, !1)
} else {
    window.attachEvent("onload", makeImagesResponsive);
    window.attachEvent("onresize", makeImagesResponsive)
};

aside{
  width:900px;
}
aside img{
  width:100%;
}

<html lang="en">

<head>
  <meta charset="UTF-8" />
</head>

<body>

<aside>
  <img alt='kitten!' data-src-base='http://yurtici.anitur.com.tr/musteri/ingoing/2017/htm/img/' data-src=""data-swapMe='<480:4.jpg,<768:3.jpg,<960:2.jpg,>960:1.jpg' class="lazyload" /> 
  
</aside>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

</html>

hi I'm using data-src for lazyload and image doesn't appear how can I use it without data-base-src thank you
Just add data-src in the same way you added src. So after the setAttribute in the last statement add s["data-src"] !== E && s.setAttribute("data-src", E); and you'll get data-src="1.jpg" in your html.

jervtub · Accepted Answer · 2017-02-08 11:56:08Z

1

The image root path in the script is currently defined in the HTML img attribute data-src-base. And the images are then parsed in the rather obfuscated data-src attribute. In case the image path must be static, you could adjust the HTML, for instance

<img data-src-base='http://mywebsite.com/images/' data-swapMe='<960:secondImage.jpg,>960:firstImage.jpg' />

However, if you would like to dynamically change the source address during runtime, the image source must be defined in the script. I would advise to then also remove the attributes from the img tag and also the attribute checks in the script, since these img attributes no longer hold valuable information.

This could be achieved by

var imageSources = [
    'http://yurtici.anitur.com.tr/musteri/ingoing/2017/htm/img/1.jpg', 'http://yurtici.anitur.com.tr/musteri/ingoing/2017/htm/img/2.jpg', 'http://yurtici.anitur.com.tr/musteri/ingoing/2017/htm/img/3.jpg'
]

function makeImagesResponsive() {
    var e = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
        t = document.getElementsByTagName("body")[0].getElementsByTagName("img");
    if (t.length === 0) return;
    for (var i = 0; i < t.length; i++) {
        // give the first image on our webpage found the image source imageSources[0]
        t[i].setAttribute("src", imageSources[0]);
    }
}
if (window.addEventListener) {
    window.addEventListener("load", makeImagesResponsive, !1);
    window.addEventListener("resize", makeImagesResponsive, !1)
} else {
    window.attachEvent("onload", makeImagesResponsive);
    window.attachEvent("onresize", makeImagesResponsive)
};

aside{
  width:900px;
}
aside img{
  width:100%;
}

<html lang="en">

<head>
  <meta charset="UTF-8" />
</head>

<body>

<aside>
  <img alt='kitten!' class="lazyload" /> 
</aside>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

</html>

answered Feb 8, 2017 at 11:56

jervtub

3371 silver badge10 bronze badges

3 Comments

ani_css Over a year ago

thanks but I need data-src for lazyload and I need data-swapMe I'll using in a software project he images will be databases

jervtub Over a year ago

I haven't fully understood your question. "script uses data-src-base for images path and I don't want to use this path because of path can be different for all images", and "I need data-src for lazyload". Do you imply the image source should be defined in the <img> tag?

jervtub Over a year ago

If there are multiple sources and data-src may be different. Wouldn't it be more convenient to use a list of links, such as data-src='"http://site1.com/img.jpg":"http://site2.com/img.jpg":"http://site3.com/img.jpg"'? The data-img-base is then no longer required, which wouldn't make much sense if each picture can have a different base address. In that way you could list all sources in the <img>.

Collectives™ on Stack Overflow

path control using js

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related