資訊專欄INFORMATION COLUMN
摘要：背景初始化依賴的高度計算，必須等完全渲染好后才能使用。最近項目中有個頁面需要使用但是這個頁面中包含許多圖片，并且圖片的高度是不定的，如果后就去初始化肯定是有問題的因為圖片可能還沒全部顯示，高度還沒完全確定。
背景
iScroll初始化依賴DOM的高度計算，必須等DOM完全渲染好后才能使用iScroll。最近項目中有個頁面需要使用iScroll,但是這個頁面中包含許多圖片，并且圖片的高度是不定的，如果DOM ready后就去初始化iScroll肯定是有問題的（因為圖片可能還沒全部顯示，DOM高度還沒完全確定）。必須等所有圖片加載完才初始化iScroll。
解決方案知道問題所在之后接著就去找解決方案了，千萬不要使用setTimeout設(shè)置個延時，然后才去初始化iScroll。
PS:項目中已經(jīng)使用了zepto的Defered,underscore
// util.js 加載圖片
function loadImg(src) {
var deferred = Deferred(), // zeptojs Deferred
img = new Image();
img.src = src;
// 圖片加載完就resolve，不care是否成功
img.onload = complete;
img.onerror = complete;
img.onabort = complete;
function complete() {
deferred.resolve();
}
return deferred.promise();
}
// 實現(xiàn)個簡單的圖片加載完再初始化iScroll函數(shù)
function lazyInitIScroll(wrap) {
var $wrap = _.isString(wrap) ? $(wrap): wrap, // zeptojs
$imgs = $wrap.find("img"),
imgPromises = _.map($imgs, function(img){ // underscore
return loadImg(img.src);// 調(diào)用loadImg方法
});
// 強(qiáng)化下，如果沒有圖片，也得兼容
if(imgPromises.length === 0) {
imgPromises.push(function(){
var deferred = Deferred(); // zeptojs Deferred
deferred.resolve();
return deferred.promise();
})
}
$.when.apply(null, imgPromises).then(function(){
new IScroll($wrap[0]); // 圖片加載完了再初始化iScroll
});
}
OK，就這樣。如果想返回初始化的iScroll對象，則可以改進(jìn)下lazyInitIScroll函數(shù)：
// 實現(xiàn)個簡單的圖片加載完再初始化iScroll函數(shù)V2
function lazyInitIScroll(wrap) {
var deferred = Deferred(),
$wrap = _.isString(wrap) ? $(wrap): wrap, // zeptojs
$imgs = $wrap.find("img"),
imgPromises = _.map($imgs, function(img){ // underscore
return loadImg(img.src);// 調(diào)用loadImg方法
});
// 強(qiáng)化下，如果沒有圖片，也得兼容
if(imgPromises.length === 0) {
imgPromises.push(function(){
var deferred = Deferred(); // zeptojs Deferred
deferred.resolve();
return deferred.promise();
})
}
$.when.apply(null, imgPromises).then(function(){
deferred.resolve(new IScroll($wrap[0]));// 圖片加載完了再初始化iScroll
});
return deferred.promise();
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83852.html
摘要：背景初始化依賴的高度計算，必須等完全渲染好后才能使用。最近項目中有個頁面需要使用但是這個頁面中包含許多圖片，并且圖片的高度是不定的，如果后就去初始化肯定是有問題的因為圖片可能還沒全部顯示，高度還沒完全確定。 背景 iScroll初始化依賴DOM的高度計算，必須等DOM完全渲染好后才能使用iScroll。最近項目中有個頁面需要使用iScroll,但是這個頁面中包含許多圖片，并且圖片的高度...
摘要：最好給瀏覽器或者毫秒的間隙再去初始化。他們控制滾動周期毫秒級別和動畫的擦除效果。重新繪制階段不是瞬時發(fā)生的只是范圍結(jié)束時觸發(fā)。注如果你有一個相當(dāng)復(fù)雜的結(jié)構(gòu)，你應(yīng)該給瀏覽器更多的執(zhí)行事件，可以設(shè)置到毫秒的超時時間。使用方法注冊事件。 入門 Scroll是一個類，每個需要使用滾動功能的區(qū)域均要進(jìn)行初始化。每個頁面上的iScroll實例數(shù)目在設(shè)備的CPU和內(nèi)存能承受的范圍內(nèi)是沒有限制的。 盡...
摘要：只針對，因為的暫時還不支持，會自動選擇不用。原因還是和問題一樣的，因為屏蔽了默認(rèn)事件。在技術(shù)上解決不了的問題，我認(rèn)為還是多和產(chǎn)品和溝通比較好，共同協(xié)商一個良好的方案。 1.在iscroll4的滾動容器范圍內(nèi)，點擊input框、select等表單元素時沒有響應(yīng)這個問題原因在于iscroll需要一直監(jiān)聽用戶的touch操作，以便靈敏的做出對應(yīng)效果，所以它把其余的默認(rèn)事件屏蔽了，解決的方法是...
摘要：只針對，因為的暫時還不支持，會自動選擇不用。原因還是和問題一樣的，因為屏蔽了默認(rèn)事件。在技術(shù)上解決不了的問題，我認(rèn)為還是多和產(chǎn)品和溝通比較好，共同協(xié)商一個良好的方案。 1.在iscroll4的滾動容器范圍內(nèi)，點擊input框、select等表單元素時沒有響應(yīng)這個問題原因在于iscroll需要一直監(jiān)聽用戶的touch操作，以便靈敏的做出對應(yīng)效果，所以它把其余的默認(rèn)事件屏蔽了，解決的方法是...
閱讀 2009·2019-08-29 16:27
閱讀 1379·2019-08-29 16:14
閱讀 3380·2019-08-29 14:18
閱讀 3463·2019-08-29 13:56
閱讀 1261·2019-08-29 11:13
閱讀 2131·2019-08-28 18:19
閱讀 3450·2019-08-27 10:57
閱讀 2287·2019-08-26 11:39
