jQuery.imgLazyLoad画像リロードコンポーネント
11413 ワード
はじめに
1つのページで要求されたピクチャが多すぎて、ピクチャが大きすぎて、ページアクセスの速度が非常に遅く、ユーザーの体験に非常に友好的ではありません.画像のリロードを使用すると、サーバーの圧力を軽減し、ページのアクセス量を増やすことができます.ここでは主に私が書いた画像のリロードコンポーネントjQuery.imgLazyLoadをまとめます.このコンポーネントを使用するには、imgラベルにimglazyload-srcプロパティを設定し、ピクチャアドレスを保存します.
二、適用例demo
三、設計構想
1、処理ブラウザのドロップダウンスクロール
$(window).scrollTop+$(window).height()とimg.offset().topの値を比較し、ブラウザウィンドウで画像のロードを開始します.
2、処理Tab切替とピクチャ輪番
処理Tabでは、画像のローテーションに切り替わり、コンポーネントは、イベント処理のための関数handleImgLoad、パラメータidxを提供する.
このパラメータは、ピクチャラウンドに対して、次のラウンドパネルのインデックスとして、次のラウンドパネルのすべてのピクチャをTabに対してプリロード切り替え、tabエントリのインデックスとして、現在表示されているtabエントリのすべてのピクチャをロードする
3、セレクタ処理
3.1、スクロールダウンセレクタの処理
コンフィギュレーションオブジェクトにはattrNameがあり、ピクチャアドレスを保持するプロパティセレクタはimg[config.attrName];
次に画像が表示され、非表示の場合は画像はロードされず、セレクタはimg[config.attrName]:visible;
再度、ピクチャがロードされた場合、img-loadedのclassNameを追加し、ロードされたピクチャをフィルタするには、img[config.attrName]:visible:not(.img-loaded);
最後に、1ページに複数のコンポーネントを使用し、1回目に使用する場合、コンフィギュレーションオブジェクトcontainerがbodyサブエレメントである場合、2回目に前のcontainerマッチングエレメントのピクチャをフィルタリングし、順次類推します.セレクタは、img[config.attrName]:visible:not(.img-loaded):not(jQuery.imgLazyLoad.selectorCache)です.
3.2、Tab切替、ピクチャマルチキャストセレクタの処理
コンフィギュレーションオブジェクトにtabItemSelectorまたはcarouselItemSelectorがあり、イベント処理関数のパラメータidxと組み合わせて、現在のTabアイテムまたは次のラウンドキャストパネルのピクチャセレクタを取得します.tabItemSelector:eq(idx)imgまたはcarouselItemSelector:eq(idx)imgです.
idx==undefinedの場合、セレクタはtabItemSelector:visible imgまたはcarouselItemSelector:eq(0)imgです.私は自分で書いたjQueryコンポーネントに基づいて自分で判断します.
四、コンポーネントソース
転載は出典を明記してください:ブログ園華子yjh
転載先:https://www.cnblogs.com/yangjunhua/p/3470988.html
1つのページで要求されたピクチャが多すぎて、ピクチャが大きすぎて、ページアクセスの速度が非常に遅く、ユーザーの体験に非常に友好的ではありません.画像のリロードを使用すると、サーバーの圧力を軽減し、ページのアクセス量を増やすことができます.ここでは主に私が書いた画像のリロードコンポーネントjQuery.imgLazyLoadをまとめます.このコンポーネントを使用するには、imgラベルにimglazyload-srcプロパティを設定し、ピクチャアドレスを保存します.
二、適用例demo
/**
* component: imgLazyLoad 2013/12/12 yjh
* invoking: jQuery.imgLazyLoad(options)
*
//
options = {
container: 'body', // ， body
tabItemSelector: '', // Tab
carouselItemSelector: '', //
attrName: 'imglazyload-src' //
diff: 300 //
}
*
*/三、設計構想
1、処理ブラウザのドロップダウンスクロール
$(window).scrollTop+$(window).height()とimg.offset().topの値を比較し、ブラウザウィンドウで画像のロードを開始します.
2、処理Tab切替とピクチャ輪番
処理Tabでは、画像のローテーションに切り替わり、コンポーネントは、イベント処理のための関数handleImgLoad、パラメータidxを提供する.
このパラメータは、ピクチャラウンドに対して、次のラウンドパネルのインデックスとして、次のラウンドパネルのすべてのピクチャをTabに対してプリロード切り替え、tabエントリのインデックスとして、現在表示されているtabエントリのすべてのピクチャをロードする
3、セレクタ処理
3.1、スクロールダウンセレクタの処理
コンフィギュレーションオブジェクトにはattrNameがあり、ピクチャアドレスを保持するプロパティセレクタはimg[config.attrName];
次に画像が表示され、非表示の場合は画像はロードされず、セレクタはimg[config.attrName]:visible;
再度、ピクチャがロードされた場合、img-loadedのclassNameを追加し、ロードされたピクチャをフィルタするには、img[config.attrName]:visible:not(.img-loaded);
最後に、1ページに複数のコンポーネントを使用し、1回目に使用する場合、コンフィギュレーションオブジェクトcontainerがbodyサブエレメントである場合、2回目に前のcontainerマッチングエレメントのピクチャをフィルタリングし、順次類推します.セレクタは、img[config.attrName]:visible:not(.img-loaded):not(jQuery.imgLazyLoad.selectorCache)です.
3.2、Tab切替、ピクチャマルチキャストセレクタの処理
コンフィギュレーションオブジェクトにtabItemSelectorまたはcarouselItemSelectorがあり、イベント処理関数のパラメータidxと組み合わせて、現在のTabアイテムまたは次のラウンドキャストパネルのピクチャセレクタを取得します.tabItemSelector:eq(idx)imgまたはcarouselItemSelector:eq(idx)imgです.
idx==undefinedの場合、セレクタはtabItemSelector:visible imgまたはcarouselItemSelector:eq(0)imgです.私は自分で書いたjQueryコンポーネントに基づいて自分で判断します.
四、コンポーネントソース
$.extend({
imgLazyLoad: function(options) {
var config = {
container: 'body',
tabItemSelector: '',
carouselItemSelector: '',
attrName: 'imglazyload-src',
diff: 0
};
$.extend( config, options || {} );
var $container = $(config.container),
offsetObj = $container.offset(),
compareH = $(window).height() + $(window).scrollTop(),
// body
bl = $.contains( document.body, $container.get(0) ),
//
notImgSelector = jQuery.imgLazyLoad.selectorCache ? ':not(' + jQuery.imgLazyLoad.selectorCache + ')' : '',
imgSelector = 'img[' + config.attrName + ']:visible' + notImgSelector,
$filterImgs = $container.find(imgSelector),
//
isStopEventHandle = false,
// ， true ，
isAutoLazyload = false;
// body
jQuery.imgLazyLoad.selectorCache = bl ? (jQuery.imgLazyLoad.selectorCache ? (jQuery.imgLazyLoad.selectorCache + ',' + config.container + ' img') : config.container + ' img') : jQuery.imgLazyLoad.selectorCache;
function handleImgLoad(idx) {
if (isStopEventHandle) {
return;
}
/**
Tab ， ， $filterImgs ， img:not(.img-loaded)， ，
， ， $filterImgs.length 0， length
*/
if ($container.find('img:not(.img-loaded)').length === 0) {
isStopEventHandle = true;
}
var itemSelector = config.tabItemSelector || config.carouselItemSelector || '';
if (itemSelector) {
if (typeof idx !== undefined && idx >= 0) {
$filterImgs = $container.find(itemSelector).eq(idx).find('img');
}
else {
if (itemSelector === config.carouselItemSelector) {
$filterImgs = $container.find(itemSelector).eq(0).find('img');
}
else {
$filterImgs = $container.find(itemSelector + ':visible').find('img');
}
}
}
else {
$filterImgs = $filterImgs.not('.img-loaded'); // ，
isAutoLazyload = true;
}
// ，
offsetObj = $container.offset();
if ($filterImgs.length > 0) {
$filterImgs.each(function(idx, elem) {
var $target = $(elem),
targetTop = $target.offset().top,
viewH = $(window).height() + $(window).scrollTop() + config.diff;
if (bl) {
$target.attr('src', $target.attr(config.attrName)).removeAttr(config.attrName).addClass('img-loaded');
}
//
if (viewH > targetTop) {
$target.attr('src', $target.attr(config.attrName)).removeAttr(config.attrName).addClass('img-loaded');
}
});
}
else {
//
isStopEventHandle = true;
$(window).unbind('resize scroll', handleImgLoad);
}
}
handleImgLoad();
if (isAutoLazyload) {
$(window).bind('resize scroll', handleImgLoad);
}
//
return {
handleImgLoad: handleImgLoad
}
}
});
// body
jQuery.imgLazyLoad.selectorCache = '';//
(function(){
var imgLazyLoadObj = $.imgLazyLoad({
container: '#first-block-switch',
carouselItemSelector: '.switch-content li'
});
$.switchable({
wrapSelector: '#first-block-switch',
contentSelector: '.switch-content',
prevBtnSelector: '.prev',
nextBtnSelector: '.next',
triggerSelector: '.switch-nav',
autoPlay: true,
duration: 300,
interval: 3000,
handleImgLoad: imgLazyLoadObj.handleImgLoad
});
}());
//
$.imgLazyLoad({ diff: 300 });転載は出典を明記してください:ブログ園華子yjh
転載先:https://www.cnblogs.com/yangjunhua/p/3470988.html