контроль пути с помощью js

Я нашел сценарий для использования в моем проекте, и я отредактировал для себя все в порядке, но есть что-то, что я не смог редактировать js (jquery), это о базовом пути, сценарий использует data-src-base для пути изображений, а я не хочу использовать этот путь из пути могут быть различными для всех изображенийконтроль пути с помощью js

скрипт использует этот

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

источник

2017-02-08 ani_css

Вы можете поместить код не уменьшенная? Это немного запутанно, чтобы получить информацию о e, n, t, s, u, m, y, ... – Saba

, это уже давно неизвестно? –

В последнем заявлении в вашем для цикла вы добавляете данные SRC-базовый атрибут (который в коде называется «а») для вашего Src-атрибута (который вы установили в «E «).

Я только что удалил 'a' из 'E' в конце, чтобы вы могли видеть, что изображение будет иметь атрибут 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>

источник

2017-02-08 11:14:41 LPL

привет, я использую 'data-src' для lazyload, и изображение не появляется, как я могу использовать его без' data-base-src' спасибо –

Просто добавьте data-src так же, как вы добавили src. Поэтому после setAttribute в последнем утверждении добавьте 's [" data-src "]! == E && s.setAttribute (" data-src ", E);' и вы получите 'data-src =" 1. jpg "в вашем html. – LPL

Корневой путь изображения в сценарии в настоящее время определяется в 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>

источник

2017-02-08 11:56:08 jervtub

спасибо, но мне нужны данные-src для lazyload, и мне нужен обмен данными sweMe. Я буду использовать в программном проекте, что он будет представлять собой базы данных. –

Я еще не полностью понял ваш вопрос. «сценарий использует data-src-base для пути к изображениям, и я не хочу использовать этот путь, потому что путь может быть другим для всех изображений», и «Мне нужен data-src для lazyload». Вы подразумеваете, что источник изображения должен быть определен в теге ''? – jervtub

да, как вы сказали –

контроль пути с помощью js

ответ

Смежные вопросы