• 基于zepto的图片延时加载和图片左右滑动


    var hasTouch = 'ontouchstart' in window;
    var scroll_EV = hasTouch ? 'touchmove' : 'scroll';
    Array.prototype.del = function(n) {
    if (n < 0)
    return this;
    else
    return this.slice(0, n).concat(this.slice(n + 1, this.length));
    }
    function lazyLoading() {}
    lazyLoading.prototype = {
    init: function(options) {
    //this.container = document.getElementById(options.container);
    //this.threshold = options.threshold ? options.threshold : 0;
    this.counter = 0;
    _self = this;
    this.containerHeight = window.screen.availHeight;
    var elements = document.getElementsByTagName("img");
    this.elements = Array.prototype.slice.call(elements);
    document.addEventListener(scroll_EV, function() {
    _self.doscroll()
    }, false);
    //this.callback = options.callback ? options.callback + "()" : null;
    },
    doscroll: function() {
    var _this = this;
    var i = 0;
    while (i < _this.elements.length) {
    curObj = _this.elements[i];
    if (curObj.getAttribute("loaded") == null && curObj.getAttribute("original") != null) {
    if (_this.abovethefold(curObj)) {
    i++;
    } else if (_this.belowthefold(curObj)) {
    _this.loadImg(curObj, i);
    _this.elements = _this.elements.del(i);
    } else {
    i++;
    if (this.counter++ > 0) {
    return false;
    }
    }
    } else {
    _this.elements = _this.elements.del(i);
    }
    }
    },
    loadImg: function(element, i) {
    var curSrc = element.getAttribute("original");
    element.src = curSrc;
    element.setAttribute("loaded", "1");
    if (element.complete) {
    element.removeAttribute("original");
    } else {
    element.onload = function() {
    element.removeAttribute("original");
    }
    }
    element.onerror = function() {}
    },
    abovethefold: function(element) {
    var curScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    var fold = curScrollTop;
    var elementTop = getDocOffsetTop(element);
    return fold >= elementTop;
    },
    belowthefold: function(element) {
    var curScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    var fold = curScrollTop + this.containerHeight;
    var elementTop = getDocOffsetTop(element);
    return fold >= elementTop;
    }
    }
    function slide() {
    var _currentX = 0;
    var slideNum = 0;
    var self = this;
    this.init = function(g_touch) {
    this.inContainer = $("#" + g_touch.swapId);
    slideNum = g_touch.slideNum;
    if (g_touch.itemWidth) this.slideWidth = g_touch.itemWidth;
    else this.slideWidth = parseInt(this.inContainer.css("width")) / slideNum;
    if (g_touch.marginValue) this.addV = g_touch.marginValue;
    else this.addV = 0;
    this._currentX = 0;
    this.viewIndex = 0;
    this.currClick = 0;
    this.pageSlot = 0;
    this.duration = g_touch.duration;
    this.carousel = true;
    if (g_touch.callBackFunc == "") this.callback = null;
    else this.callback = g_touch.callBackFunc + "()";
    this.isCycle = g_touch.isCycle;
    this.isDoclick = g_touch.isDoclick;
    this.imglist = g_touch.imglist;
    this.tempImagList = [];
    this.callBackDoclick = null;
    if (this.isDoclick) {
    if (g_touch.callBackDoclick != "" || typeof(g_touch.callBackDoclick) != "undefined") this.callBackDoclick = g_touch.callBackDoclick + "()";
    }
    this.preloadArr = new Array();
    if (this.imglist) {
    for (var i = 0; i < slideNum; i++) {
    if (i == 0) {
    this.preloadArr.push(true);
    } else this.preloadArr.push(false);
    }
    }
    this.inContainer.css("-webkit-transition-timing-function", "ease-out");
    this.inContainer.css("-webkit-transform", "translate3d(0,0,0)");
    this.inContainer.css("-webkit-transition-property", "-webkit-transform");
    this.inContainer.css("-webkit-transition-delay", 0);
    if (slideNum < 3) {
    this.carousel = false;
    this.isCycle = false;
    }
    if (this.isCycle) {
    this.arrangePages()
    }
    if (this.isDoclick) this.inContainer.get(0).addEventListener("click", self.doClick, false);
    this.inContainer.get(0).addEventListener("touchstart", function() {
    self.touchStart()
    }, false);
    this.inContainer.get(0).addEventListener("touchmove", function() {
    self.touchMove()
    }, false);
    this.inContainer.get(0).addEventListener("touchend", function() {
    self.touchEnd()
    }, false);
    this.inContainer.get(0).addEventListener("webkitTransitionEnd", function() {
    if (self.isCycle) {
    self.arrangePages();
    }
    }, false);
    };
    this.nextPage = function() {
    this.preLoadImg(1, this.viewIndex);
    if (this.carousel) {
    if (this.viewIndex == slideNum - 1) {
    if (this.isCycle) this.setPage(0, this.pageSlot + 1)
    } else {
    this.setPage(this.viewIndex + 1, this.pageSlot + 1)
    }
    } else {
    this.setPage(Math.min(this.viewIndex + 1, slideNum - 1))
    }
    this.slideAction(this.pageSlot, this.duration);
    }
    this.prevPage = function() {
    this.preLoadImg(2, this.viewIndex);
    if (this.viewIndex == 0) {
    if (this.isCycle) this.setPage(slideNum - 1, this.pageSlot - 1)
    } else {
    this.setPage(this.viewIndex - 1, this.pageSlot - 1)
    }
    this.slideAction(this.pageSlot, this.duration);
    }
    this.setPage = function(pageNum, a) {
    this.viewIndex = pageNum;
    this.pageSlot = a != null ? a : this.viewIndex
    eval(this.callback);
    }
    this.slideAction = function(d, t) {
    if (d == 0) {
    if (!this.isCycle) a = 0
    else a = this.addV
    } else a = -d * this.slideWidth + this.addV;
    var duration = !t ? "0" : t
    this.cssTranslation(a, t);
    };
    this.cssTranslation = function(a, t) {
    if (this._currentX == a && this.isCycle) {
    this.arrangePages();
    return
    }
    this.setTranslation(a);
    this.inContainer.css("-webkit-transform", "translate3d(" + a + "px,0px,0px)");
    this.inContainer.css("-webkitTransitionDuration", t)
    }
    this.setChildTranslation = function(b, a) {
    if (b._currentX == a) {
    return
    }
    b._currentX = a;
    b.css("-webkit-transform", "translate3d(" + a + "px,0px,0px)");
    };
    this.setTranslation = function(v) {
    this._currentX = v;
    };
    this.arrangePages = function() {
    if (this.carousel) {
    var d = this.getTranslation();
    if (this.viewIndex == 0) d = d - this.addV;
    var h = this.slideWidth,
    b = slideNum,
    l = -1 * Math.floor(d / h),
    f = (b + (l % b)) % b,
    i = h * b,
    c = -1 * Math.ceil(d / i),
    e = Math.ceil((b - 1) / 2),
    g = Math.floor((b - 1) / 2),
    a, k;
    carouselBufferLimit = 4;
    if (carouselBufferLimit > 0) {
    e = Math.min(e, carouselBufferLimit);
    g = Math.min(g, carouselBufferLimit)
    }
    k = i * c;
    this.setChildTranslation(this.inContainer.find("li").eq(f), k);
    while (e > 0) {
    a = (f + e) % b;
    k = a < f ? i * (c + 1) : i * c;
    this.setChildTranslation(this.inContainer.find("li").eq(a), k);
    --e
    }
    while (g > 0) {
    a = (b + (f - g)) % b;
    k = a > f ? i * (c - 1) : i * c;
    this.setChildTranslation(this.inContainer.find("li").eq(a), k);
    --g
    }
    }
    };
    this.getTranslation = function() {
    return this._currentX;
    }
    this.touchStart = function() {
    this.isMoving = false;
    var currTouch = event.touches[0];
    this.currX = currTouch.screenX;
    this.currY = currTouch.screenY;
    this.currDeltaX = this.getTranslation();
    this.DeltaX = 0;
    var _self = self;
    if (this.isCycle) self.arrangePages();
    this.preLoadImg(0, self.viewIndex);
    };
    this.touchMove = function() {
    var b = event.touches[0].screenX;
    this.DeltaX = b - this.currX;
    this.DeltaY = event.touches[0].screenY - this.currY;
    if (!this.isMoving) {
    this.doScrollX = Math.abs(this.DeltaX) > Math.abs(this.DeltaY);
    this.isMoving = true;
    if (this.doScrollX) {
    event.preventDefault();
    }
    } else {
    if (this.doScrollX) {
    var curScrollX = parseInt(this.currDeltaX) + parseInt(this.DeltaX);
    this.cssTranslation(curScrollX, "0s")
    event.preventDefault();
    }
    }
    };
    this.touchEnd = function() {
    var moveX = this.DeltaX;
    if (this.isMoving) {
    if (self.isDoclick) self.inContainer.get(0).removeEventListener("click", self.doClick, false);
    if (this.doScrollX) {
    if (moveX > 10) {
    self.prevPage();
    } else if (moveX < -10) {
    self.nextPage();
    } else {
    self.slideAction(this.pageSlot, "0s");
    }
    } else {
    self.slideAction(this.pageSlot, "0s");
    }
    } else {
    if (self.isDoclick) {
    self.doClick();
    }
    }
    self.inContainer.get(0).removeEventListener("touchmove", function() {
    _self.touchMove()
    }, false);
    self.inContainer.get(0).removeEventListener("touchend", function() {
    _self.touchEnd()
    }, false);
    };
    this.doClick = function() {
    eval(self.callBackDoclick);
    }
    this.gotoItemByIndex = function(index) {
    this.preLoadImg(0, index);
    this.setPage(index);
    this.slideAction(this.pageSlot, "0s");
    };
    this.preLoadImg = function(type, index) {
    if (this.imglist) {
    var loadIds = [];
    var start = 0;
    var end = 0;
    if (this.isCycle && type == 0) {
    start = index - 2;
    end = index + 2;
    if (start < 0) {
    start = slideNum + start;
    }
    if (end > slideNum) {
    end = end - slideNum;
    }
    } else if ((!this.isCycle && type == 0) || type == 1) {
    start = index;
    end = index + 2;
    if (end > slideNum) {
    end = end - slideNum;
    }
    } else {
    start = index - 2;
    end = index
    if (start < 0) {
    start = slideNum + start;
    }
    }
    if (end < start) {
    for (var id = 0; id <= end; id++) {
    preloadIndex = id;
    if (preloadIndex > 0 && preloadIndex < slideNum && !this.preloadArr[preloadIndex]) {
    if (this.imglist[preloadIndex] != null) {
    var curl = this.imglist[preloadIndex].url;
    var tempImg = new Image();
    tempImg.index = preloadIndex;
    tempImg.curl = curl;
    tempImg.src = curl;
    tempImg.onload = function() {
    self.inContainer.find(".topic_img").eq(this.index).attr("src", this.curl);
    self.preloadArr[this.index] = true;
    }
    tempImg.onerror = function() {
    self.inContainer.find(".topic_img").eq(this.index).attr("src", staticPath + "/img/info3/loaderrpic.png");
    self.preloadArr[this.index] = false;
    }
    }
    }
    }
    for (var id = start; id < slideNum; id++) {
    preloadIndex = id;
    if (preloadIndex > 0 && preloadIndex < slideNum && !this.preloadArr[preloadIndex]) {
    if (this.imglist[preloadIndex] != null) {
    var curl = this.imglist[preloadIndex].url;
    var tempImg = new Image();
    tempImg.index = preloadIndex;
    tempImg.curl = curl;
    tempImg.src = curl;
    tempImg.onload = function() {
    self.inContainer.find(".topic_img").eq(this.index).attr("src", this.curl);
    self.preloadArr[this.index] = true;
    }
    tempImg.onerror = function() {
    self.inContainer.find(".topic_img").eq(this.index).attr("src", staticPath + "/img/info3/loaderrpic.png");
    self.preloadArr[this.index] = false;
    }
    }
    }
    }
    } else {
    for (var id = start; id <= end; id++) {
    preloadIndex = id;
    if (preloadIndex > 0 && preloadIndex < slideNum && !this.preloadArr[preloadIndex]) {
    if (this.imglist[preloadIndex] != null) {
    var curl = this.imglist[preloadIndex].url;
    var tempImg = new Image();
    tempImg.index = preloadIndex;
    tempImg.curl = curl;
    tempImg.src = curl;
    tempImg.onload = function() {
    self.inContainer.find(".topic_img").eq(this.index).attr("src", this.curl);
    self.preloadArr[this.index] = true;
    }
    tempImg.onerror = function() {
    self.inContainer.find(".topic_img").eq(this.index).attr("src", staticPath + "/img/info3/loaderrpic.png");
    self.preloadArr[this.index] = false;
    }
    }
    }
    }
    }
    }
    }
    }

    function getDocOffsetTop(element) {
    if (element == null) {
    return null;
    }
    var offsetTop = element.offsetTop;
    while (element = element.offsetParent) {
    offsetTop += element.offsetTop;
    }
    return offsetTop;
    }

    demo下载地址:http://www.cnblogs.com/zzcflying/admin/Files.aspx

  • 相关阅读:
    Ruby自学笔记(二)— Ruby的一些基础知识
    Ruby自学笔记(一)— 基本概况
    Tomcat基础教程(四)
    Excel导入
    构建API
    序列化
    图片上传(练习)
    发邮件
    发短信
    Excel表导出
  • 原文地址:https://www.cnblogs.com/zzcflying/p/2501988.html
Copyright © 2020-2023  润新知