用lazyload替换img

时间:2017-02-08 08:05:01

标签: javascript jquery html css lazy-loading

我正在使用conversion并且它具有data-src参数,同时我正在使用lazyload plugin on my page替换响应时的图像并使用data-src参数我也将data-src的名称更改为data-swapMe而不是冲突。但我想知道lazyload会注意到我的图像吗?哪一个懒惰?替换img?或两者兼而有之?

另一件事是有什么方法可以删除data-src-base我的路径可能不同

another plugin

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)
};
<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="http://yurtici.anitur.com.tr/musteri/ingoing/2017/htm/img/1.jpg" 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>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/2.0.7/lazysizes.min.js"></script>
</body>

</html>

0 个答案:

没有答案