欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript瀑布流式圖片懶加載實(shí)例

 更新時(shí)間:2020年06月28日 09:17:49   投稿:lijiao  
這篇文章主要為大家詳細(xì)介紹了javascript瀑布流式圖片懶加載實(shí)例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

最近項(xiàng)目使用到了“懶加載”,現(xiàn)在更新一般,因?yàn)槠綍r(shí)主要使移動(dòng)端的開發(fā)所以庫(kù)文件使用的是zepto.js 。當(dāng)然也可以和jQuery 通用。

代碼如下:

/**
 * Created by zhiqiang on 2015/10/14.
 * hpuhouzhiqiang@gmail.com
 * 圖片的懶加載
 **/
function loadImgLazy(node) {
 var lazyNode = $('[node-type=imglazy]', node),
 mobileHeight, lazyOffSetHeight, tempHeight, currentNodeTop, imgObject,
 imgDataSrc, localUrl;

 localUrl = location.href;
 // 獲取當(dāng)前瀏覽器可視區(qū)域的高度
 mobileHeight = $(window).height();

 return function(co) {

 var conf = {
 'loadfirst': true,
 'loadimg': true
 };

 for (var item in conf) {
 if (item in co) {
 conf[item] = co[item];
 }
 }

 var that = {};
 var _this = {};
 /**
 * [replaceImgSrc 動(dòng)態(tài)替換節(jié)點(diǎn)中的src]
 * @param {[type]} tempObject [description]
 * @return {[type]} [description]
 */
 _this.replaceImgSrc = function(tempObject) {
 var srcValue;

 $.each(tempObject, function(i, item) {
 imgObject = $(item).find('img[data-lazysrc]');
 imgObject.each(function(i) {
  imgDataSrc = $(this).attr('data-lazysrc');
  srcValue = $(this).attr('src');
  if (srcValue == '#') {
  if (imgDataSrc) {
  $(this).attr('src', imgDataSrc);
  $(this).removeAttr('data-lazysrc');
  }
  }
 });
 });
 };

 /**
 * 首屏判斷屏幕上是否出現(xiàn)imglazy節(jié)點(diǎn),有的話就加載圖片
 * @param {[type]} i) {  currentNodeTop [description]
 * @return {[type]} [description]
 */
 _this.loadFirstScreen = function() {
 if (conf.loadfirst) {
 lazyNode.each(function(i) {
  currentNodeTop = $(this).offset().top;
  if (currentNodeTop < mobileHeight + 800) {
  _this.replaceImgSrc($(this));
  }
 });
 }
 };

 //當(dāng)加載過(guò)首屏以后按照隊(duì)列加載圖片
 _this.loadImg = function() {
 if (conf.loadimg) {
 $(window).on('scroll', function() {
  var imgLazyList = $('[node-type=imglazy]', node);
  for (var i = 0; i < 5; i++) {
  _this.replaceImgSrc(imgLazyList.eq(i));
  }
 });
 }
 };

 that = {
 replaceImgSrc: _this.replaceImgSrc(),
 mobileHeight: mobileHeight,
 objIsEmpty: function(obj) {
 for (var item in obj) {
  return false;
 }
 return true;
 },
 destory: function() {
 if (_this) {
  $.each(_this, function(i, item) {
  if (item && item.destory) {
  item.destory();
  }
  });
  _this = null;
 }
 $(window).off('scroll');
 }
 };
 return that;
 };
}

希望本文對(duì)大家學(xué)習(xí)javascript圖片懶加載有所幫助。

相關(guān)文章

  • JavaScript/Js腳本處理html元素的自定義屬性解析(親測(cè)兼容Firefox與IE)

    JavaScript/Js腳本處理html元素的自定義屬性解析(親測(cè)兼容Firefox與IE)

    這篇文章主要是對(duì)JavaScript/Js腳本處理html元素的自定義屬性解析(親測(cè)兼容Firefox與IE)進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助
    2013-11-11
  • js實(shí)現(xiàn)可愛的氣泡特效

    js實(shí)現(xiàn)可愛的氣泡特效

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)可愛的氣泡特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-09-09
  • js實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲

    js實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-08-08
  • JavaScript實(shí)現(xiàn)手寫promise的示例代碼

    JavaScript實(shí)現(xiàn)手寫promise的示例代碼

    promise?作為前端開發(fā)中常用的函數(shù),解決了?js?處理異步時(shí)回調(diào)地獄的問題,大家應(yīng)該也不陌生了,今天來(lái)學(xué)習(xí)一下?promise?的實(shí)現(xiàn)過(guò)程吧
    2023-04-04
  • 重寫document.write實(shí)現(xiàn)無(wú)阻塞加載js廣告(補(bǔ)充)

    重寫document.write實(shí)現(xiàn)無(wú)阻塞加載js廣告(補(bǔ)充)

    這篇文章主要介紹了重寫document.write實(shí)現(xiàn)無(wú)阻塞加載js廣告,需要的朋友可以參考下
    2014-12-12
  • 獲取JS中網(wǎng)頁(yè)各種高寬與位置的方法總結(jié)

    獲取JS中網(wǎng)頁(yè)各種高寬與位置的方法總結(jié)

    本文詳細(xì)羅列了如何在javascript獲取網(wǎng)頁(yè)各種高寬及位置,內(nèi)容比較全面,有需要的可以參考一下。
    2016-07-07
  • JavaScript優(yōu)化專題之Loading and Execution加載和運(yùn)行

    JavaScript優(yōu)化專題之Loading and Execution加載和運(yùn)行

    這篇文章主要介紹了JavaScript優(yōu)化專題中Loading and Execution加載和運(yùn)行的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-01-01
  • 深入淺析Bootstrap列表組組件

    深入淺析Bootstrap列表組組件

    列表組是靈活又強(qiáng)大的組件,不僅能用于顯示一組簡(jiǎn)單的元素,還能用于復(fù)雜的定制的內(nèi)容。本文給大家介紹Bootstrap列表組組件,感興趣的朋友一起學(xué)習(xí)吧
    2016-05-05
  • JS重學(xué)系列之聊聊new操作符

    JS重學(xué)系列之聊聊new操作符

    這篇文章主要給大家介紹了關(guān)于JS重學(xué)系列之new操作符的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • CocosCreator經(jīng)典入門項(xiàng)目之flappybird

    CocosCreator經(jīng)典入門項(xiàng)目之flappybird

    這篇文章主要介紹了CocosCreator經(jīng)典入門項(xiàng)目之flappybird,詳細(xì)說(shuō)明了制作的每個(gè)步驟,還有詳盡的代碼,對(duì)CocosCreator感興趣的同學(xué),一定要看一下
    2021-04-04

最新評(píng)論