2024-01-02

博天堂918赌场网址腾讯新闻中心首页改版啦

  博天堂918赌场网址腾讯新闻中心首页改版啦我正在编写页面时尽量把CSS放正在前面,js放到尾部。不外页面里有良众群众的页面片,只可include进来,是以这些页面片里的js也随着include进来。

  对必要懒加载的图片,把实正在的图片所在放到_src的属性中,不要写src属性,由于src的值为空时也会吁请,或者为src扶植一个1x1的占位图片。

  正在简直全体的页面中,图片是最担搁页面加载的,之前的旧页面正在没有任何懒加载的环境下,依附着腾讯壮大的任事器,也能疾速的显示页面□□。不外,正在新页面里,除了首屏显示的图片外博天堂918赌场网址,简直全体的图片都操纵了懒加载,当用户看到这个地方时,才显示图片。

  全数页面左侧的图片,鼠标hover时有放大的恶果新闻中心□□,这里是操纵到了CSS3的transition属性□□,是以正在IE8及以下是看不到这种恶果的。

  腾讯音讯中央的首页改版啦,接待拜候【】。我是负担此次改版的前端拓荒工程师□□,这日也早年端的角度领会一下改版的流程和恶果□□。

  这3个都是最根基的优化准则。后台图片能归并的则归并□,不行归并的则通过器械实行压缩,js和css也实行相应的压缩□。

  图片也是分块加载的,滚动到某个区域时,才加载这个区域里全体的图片□。全数页面从上往下分成了5个区域:

  切磋到用户可以经常的切换页卡,或者用户可以只是念容易从第1个页卡搬动到第5个页卡。这种环境下□□,是没有需要吁请第2□□,3□,4个页卡里的实质的。是以为页卡切换扶植了延时吁请□□,当鼠标正在目今页卡中止240ms以上□,才以为用户确实念看这个页卡的实质,不然以为鼠标只是从目今页卡滑过□□,而不是真的念看其实质。

  拖拽相应的频道□,竣事后保全即可。下次翻开页面时,就会显示之前拖拽好的递次。

  当滚动条滚动到目今区域时,则把area1区域里name的值是page_cnt_1的图片都加载竣事,而area2则正在滚动条再次滚动到相应的隔绝时才加载。

  本来正在点击“保全”后□□,法式会将调节后的页卡递次保全到cookie中,今后每次翻开页面时,城市查抄是否存正在这个cookie,若存正在cookie则显示相应的递次□□,不然显示页卡的默认递次□□。

  把全数页面里的图片划分区域,值为page_cnt_{num},num从1首先递次递增不行有间断:

  前几个做的改版页面,只是正在原页面长进行了容易的CSS删改□□。此次音讯首页的改版,是从零首先写的一个新页面。是以自决权更大,能把优化做到最大;不外由于种种客观和主观的由来□,仍旧尚有很大先进的空间。

  正在第3条音讯和第4条音讯中央有13个频道的页卡□,用户可能通过把鼠标放到某个页卡上获取目今页卡的音讯,点击页卡时跳转到相应的频道。除要闻页卡外,其他页卡的音讯均是通过ajax的方法获取的。

  页卡的默认递次是:财经、体育、文娱、房产...社会、培养。正在“更众”的页卡里有个排序选项,可能正在弹出框里删改页卡的显示递次,让本人更感兴致的频道排正在前面。

  新页面上线后,还会有良众后续的功用必要增添□□。正在此也只是做个改版的阶段性总结□,望民众指责订正□□。

  正在影像力模块里□,鼠标hover时感到会增添了一个蒙层恶果,本来是图片的透后度产生了转变:

if (!window.jQuery) { document.write(unescape("%3Cscript src='/public/static/common/js/jquery.min.js' type='text/javascript'%3E%3C/script%3E")); document.write(unescape("%3Cscript type='text/javascript'%3E try{jQuery.noConflict();}catch(e){} %3C/script%3E")); } if (window.jQuery) { (function($){ default_switch(); //简体繁体互换 function default_switch() { var home_lang = getCookie('home_lang'); if (home_lang == '') { home_lang = 'cn'; } if ($.inArray(home_lang, ['zh','cn'])) { var obj = $('#jquerys2t_1573822909'); var isSimplified = getCookie('jquerys2t_1573822909'); if ('cn' == isSimplified) { $('body').t2s(); $(obj).text('繁體'); } else if ('zh' == isSimplified) { $('body').s2t(); $(obj).text('简体'); } } } //简体繁体互换 $('#jquerys2t_1573822909').click(function(){ var obj = this; var isSimplified = getCookie('jquerys2t_1573822909'); if ('' == isSimplified || 'cn' == isSimplified) { $('body').s2t(); // 简体转繁体 setCookie('jquerys2t_1573822909', 'zh'); $(obj).text('简体'); } else { $('body').t2s(); // 繁体转简体 setCookie('jquerys2t_1573822909', 'cn'); $(obj).text('繁體'); } }); })(jQuery); }