Question

我找到了一个在我的项目中使用的脚本，我为自己编辑了一切都没问题，但有些东西我编辑失败js（jquery）是关于基本路径，脚本使用data-src-base用于图像路径和我不想使用此路径，因为所有图像的路径可能不同

脚本使用此

 <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>

Answer 1

在for循环的最后一个语句中，您要将data-src-base属性（在您的代码中称为＆＃39; a＆＃39;）添加到您的src属性（您设置的属性）到了E＆＃39;）。

我刚刚删除了＆＃39; a＆＃39;来自＆＃39; E＆＃39;在最后，您可以看到图片将具有属性src="1.jpg"（如果这是您的屏幕尺寸）。

但是，您应该可以删除此处未使用的其他变量，例如u和a。

＆＃13;

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)
};

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

脚本中的图像根路径当前在HTML img属性data-src-base中定义。然后在相当混淆的data-src属性中解析图像。如果图像路径必须是静态的，您可以调整HTML，例如

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

但是，如果要在运行时动态更改源地址，则必须在脚本中定义图像源。我建议然后从img标记中删除属性，并在脚本中删除属性检查，因为这些img属性不再包含有价值的信息。

这可以通过

来实现

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>

使用js的路径控制

2 个答案: