视频播放问题二：解决Apple自带的Safari浏览器不显示动态添加元素的问题

视频右侧的播放列表是从数据库获取下来，动态渲染的。如下图
其他浏览器都可以正常显示，但是苹果自带的Safari浏览器只展示第一屏，元素滚动以后，不会自动显示列表元素，每次都要鼠标滑过哪个才显示哪个。
且原来图片是一次性全部加载的，所以这次优化做了图片的懒加载，并且给根据滚动的距离给相应的列表元素添加了另一个宏任务setTimeout，来代替手动触发的hover事件，达到显示播放列表的目的。
HTML代码片段：

主要样式：

<style>
.bofang {
    position: relative;
    width: 30%;
    height: 100%;
    overflow: hidden;
    background: #333;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
.bofang .bofang_list {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}
.bofang ul li {
    width: 100%;
    height: 80px;
    cursor: pointer;
    padding-left: 15px;
    padding-top: 10px;
    overflow: hidden;
}
...
</style>

JS代码

$(function(){
  // 页面加载完毕或者$("#bofang_list")滚动时图片懒加载
  window.onload = $("#bofang_list")[0].onscroll = function(){
    var viewHeight =$(".bofang")[0].clientHeight, // 可视区域的高度    
        //(滚动的距离加上可视区域高度*2（多加载一屏）-标题.bofang_head高度) / 单个列表里的高度     
        t = Math.ceil(($("#bofang_list")[0].scrollTop+viewHeight*2-44)/80),  // t:需要加载到第几条  
        liAry= $("#bofang_list").find("li");//获取所有的播放列表
    Array.prototype.filter.call(liAry, function(item, index) {             
      if(t >= 0 &&  t >= index){ 
      	var offTop = +item.offsetTop, //所有需要加载的列表的偏移距离
            img= $(item).find(".lazy-load")[0],//找到列表内的图片 
            imgSrc = img.getAttribute("data-original"),//获取图片data-original属性，该属性包含了图片的真实路径 	
		    imgOld = img.getAttribute("src");//获取图片的路径，此处可以放置占位图，也可以先不添加  
        if(!imgSrc || imgSrc == imgOld) return;//如果不存在data-original属性，或者src属性已经是真实路径，则不做任何操作
		img.setAttribute("src",imgSrc);  //否则，把真实路径赋值给图片元素的src属性      
        img.removeAttribute("data-original");//删除图片的data-original属性      
        
        //给图片和播放列表添加过渡效果，使其自动显示（解决苹果自带Safari浏览器不自动显示动态元素问题）;
        setInterval(function() {
            j += 0.2;
            if(j <= 1) {
				 item.style.opacity = j; 
				 img.style.opacity = j;
				 return;
			}
        }, 50)
      };
    });
  }  
})