极客观点
项目管理
HarmonyOS
在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];
})
}
})
});
html5
vue获取就用vue的方法，就不要vue和jquery混着用了吧
更新于 2017-06-21 李
loadImage放在ajax的回调里面执行。
看到你又修改了问题，我来更新一下我的回答，
首先我来说一下vue和jquery操作数据的不同。
1.1 vue来说获得到了数据，存放起来，然后会有一个监听的过程，判断，如果有数据，渲染到模板上，你需要做的就是写好模板，把数据保存下来，其他的就是自动的了。
1.2 jquery呢获取到数据，渲染数据，然后找个dom节点，innerHTML一下子。
那么你这个vue和jquery里面应该怎么做
2.1 jquery的话，因为在回调函数里面已经渲染完成了，直接在最后面写就搞定了。
2.2 vue的话，因为有渲染进度的问题，可以在：src里面直接写表达式嘛。每一个加载都会改变当前img的tag，然后根据tag判断用什么url