2016-07-07 3 views
0

я получаю мою страница перегружена после того как я добавить много содержания Я звоню Контекстный (righmenu) с помощью Javascript, но когда он имущий много содержимого страниц нагрузки так медленноменю Load только тогда, когда это необходимо

вот мой JavaScript rightClick menu:

<script> 
    $(document).ready(function() { 
     context.init({preventDoubleContext: false}); 


     context.attach('#ID', [ 
     {text: '<i class="el-icon-download-alt" style="color: #1AADC1"></i> &nbsp;&nbsp;Download', href: '#', extra: 'target="_blank"'}, 
     {divider: true}, 
     {text: '<i class="el-icon-link" style="color: #3CC8DB"></i> &nbsp;&nbsp;Export Link', href: '#link_ID', extra: 'class="popup-with-form"'}, 
     {text: '<i class="el-icon-share-alt" style="color: #3CC8DB"></i> &nbsp;&nbsp;Share', subMenu: [ 
     {text: '<i class="fa fa-envelope fa-lg" style="color: #009688"></i> &nbsp;&nbsp;Email', href: '#', target:'_blank', }, 
     {text: '<i class="fa fa-facebook fa-lg" style="color: #0D47A1"></i> &nbsp;&nbsp;Facebook', href: '#', target:'_blank', }, 
     {text: '<i class="fa fa-google-plus fa-lg" style="color: #F44336"></i> &nbsp;&nbsp;Google+', href: '#', target:'_blank', }, 
     {text: '<i class="fa fa-twitter fa-lg" style="color: #42A5F5"></i> &nbsp;&nbsp;Twitter', href: '#', target:'_blank', } 
     ]}, 
     {divider: true}, 
     {text: '<i class="el-icon-remove" style="color: #DB3C4C"></i> &nbsp;&nbsp;Delete', href: '#del_ID', extra: 'class="modal-basic"'}, 
     {text: '<i class="el-icon-font" style="color: #3CDBAE"></i> &nbsp;&nbsp;Edit', href: '#', extra: 'class="simple-ajax-popup"'}, 
     {divider: true}, 
     {text: '<i class="el-icon-cog" style="color: #48A360"></i> &nbsp;&nbsp;Properties', href: '#info_ID', extra: 'class="popup-with-form"'}, 
    ]); 

    context.settings({compress: true}); 
}); 
</script> 

ID отличается от всех.

HTML код:

<div id="ID" class="thumbnail"> 
    <label for="cID"><div class="thumb-preview"> 
    <a class="thumb-image" href="<TMPL_VAR img_preview>"> 
     <img src="#" class="img-responsive" alt="Project"> 
    </a> 
    <div class="mg-thumb-options"> 
     <div class="mg-toolbar"> 
      <div class="mg-option checkbox-custom checkbox-inline"> 
       <input type="checkbox" name="demo" id="cID" value="ID"> 
       <label for="c<TMPL_VAR file_id>">SELECT</label> 
      </div> 
     </div> 
    </label> 
</div> 
<h5 class="mg-title text-weight-semibold">Demo Test</h5> 

Так что у меня, что это нормально, если у меня есть только 4 или 5 содержание, но до того, что его замедлит мой сайт, Я хочу иметь только один выпадающее меню, меню I не нужно добавлять код JavaScript для всего содержимого HTML.

+0

Итак, у вас есть выпадающее меню, и вы хотите уменьшить его размер правильно? Но размер здесь кажется фиксированным. Можете ли вы подробнее рассказать. – Red

+0

Нет, я не хочу уменьшать размер, но если у меня есть грузы html-кода и javascript, моя страница будет загружаться медленно –

ответ

1

Не помещайте свой код HTML в функцию jQuery. Вместо этого используйте jQuery, чтобы скрыть или показать раскрывающееся меню. Не нужно добавлять HTML внутри него. Поместите HTML обратно, оберните его div. Показать/скрыть этот div, используя jQuery $(#id).show()/hide().

Смежные вопросы