我找到了一个用于我的元素的脚本，我自己编辑了一切正常，但有一些我失败了编辑 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" />
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>最佳答案
在 for 循环的最后一条语句中，您将 data-src-base 属性(在您的代码中称为“a”)添加到您的 src-attribute(您设置为“E”)。
我刚刚从末尾的“E”中删除了“a”，因此您可以看到图像将具有属性 src="1.jpg"(如果这是您的屏幕尺寸) .
但是，您应该能够在此处删除未使用的其他变量，例如 u 和 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>关于javascript - 使用js进行路径控制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42110863/