在loadImage中获取不到dataUrl,因为ajax请求和这个方法同时进行的造成页面获取不到元素,所以加了定时器,但是如果ajax的请求时间超过了定时器的时间还是获取不到元素,所以有没有更好的办法来解决
$(function(){
var Myapp=new Vue({ el:'#myapp', data:{ apiBaseUrl:"https://api.starmakerstudios.com/api/v17/", songList:[], contain:{}, scrollTop:'', dataIamge:[] }, ready: function () { this.loadImage(); this.lazyImage(); }, methods:{ getParam: function (name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; }, loadImage:function(){ var ts=$(this); setTimeout(function(){ var dataUrl = $('[data-url]'); var scrollTop = $(window).scrollTop(); var clientBottom = $(window).height() + scrollTop; dataUrl.each(function (v, i) { if ($(this).offset().top < clientBottom + 50) { var _Url = $(this).attr('data-url'); $(this).attr('src',_Url) } }) },500) }, lazyImage:function () { var headerHeight=$('.header').height(); var ts=this; $(window).on('scroll',function(){ ts.loadImage(); ts.scrollTop=$(window).scrollTop(); if(ts.scrollTop>headerHeight){ $('.header-i').show(); setTimeout(function(){ $('.header-i').css({ 'transform':'translate3d(0,0,0)', '-webkit-transform':'-webkit-translate3d(0,0,0)', '-moz-transform':'-moz-translate3d(0,0,0)', '-o-transform':'-o-translate3d(0,0,0)' }) },10) }else{ $('.header-i').hide(); setTimeout(function(){ $('.header-i').css({ 'transform':'translate3d(0,-65px,0)', '-webkit-transform':'-webkit-translate3d(0,-65px,0)', '-moz-transform':'-moz-translate3d(0,-65px,0)', '-o-transform':'-o-translate3d(0,-65px,0)', }) },30) } }) // $(window).scroll(function(){ // // }) }, shareFacebook:function(){ var ts = this; var text="Amazing charity activity on #StarMaker, Sing to donate money to a children's charity. Join me to share the love! #Sing #Karaoke #Music #Singer"; var baseUrl=location.origin; var url=baseUrl+"/stmaker_songlist/promotion/"+this.promotion_id+"/"+ts.getParam('device').replace(/[,|_]/g, '_')+"/share_type=fb"; var img = 'https://d2odow79s717pv.cloudfront.net/production/promotion/cover/13_share.jpg'; location.href = 'sm://facebook/?text=' + encodeURIComponent(text) + "&url=" + encodeURIComponent(url)+'&img=' + encodeURIComponent(img); }, goSing:function(params){ var locationUrl=window.location.href; var url=''; if(locationUrl.indexOf('fb')>0){//如果是facebook打开则是facebook $('.singlist').attr('data-gaid','facebookSongList'); url="https://m-link.starmakerstudios.com/songdetail/?songId="+params.id; }else{ if(event.target.className=="singer"){ $('.singer').attr('data-gaid','activitySing'); var songs=JSON.stringify(params); url="sm://recordsong/?song="+encodeURIComponent(songs)+"&promotion_id="+this.promotion_id; }else{ $('.singlist').attr('data-gaid','activitySongList'); url="sm://songdetail/?songId="+params.id+"&songTitle="+params.title+"&promotion_id="+this.promotion_id; } } window.location.href=url; } }, created:function(){ var ts=this; var dev = this.getParam('device').replace(/[,|_]/g, '/') || ''; this.promotion_id=this.getParam('promotion_id'); var url = this.apiBaseUrl + dev + '/promotions/' + this.promotion_id + '/songs'; this.$http.get(url).then(function (response) { var data=JSON.parse(response.data); this.songList=data[1].song_list; this.contain=data[0]; }) } })
});
vue获取就用vue的方法,就不要vue和jquery混着用了吧
楼上说的有道理,你也可以试试回调。
this.$nextTick(() => {
})
ready里这样写吧
试一下生命周期钩子函数吧。
https://vuejs.org.cn/api/#选项-生命周期钩子
或者玩一下promise。
把jquery删掉