JQuery ленивый груз - PullRequest
Новая
       7

JQuery ленивый груз

0 голосов
/ 14 сентября 2011

Я пытаюсь создать div, который будет использовать ленивую загрузку jquery для загрузки изображений, поступающих из connectedIn. Когда я смотрю на примеры, найденные в Интернете, кажется, что они отлично работают с моим браузером, но когда я пытаюсь добавить его, кажется, что он не работает. Я не уверен, имеет ли это значение, но я развиваюсь в Groovy / Grails. Вот код, который у меня есть до рендеринга: 

  <html>
  <head>
  <script type="text/javascript" src="${resource(dir:'js',file:'jquery.lazyload.js')}">  

  </script>     
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
   ....
  <script type="text/javascript">
  $("img").lazyload({
placeholder : "/mgr/images/spinner.gif" 
 });

 </script>
   ....
</head>
<body>
 <div style="width: 150px; height:200px; border:1px solid red; overflow:auto;">
 <g:each in="${Friends}" status="i" var="Friends">  
   <img original=${Friends[3]} src="/mgr/images/spinner.gif">
</g:each>
   </div>

Этот код будет рисовать только div и отображать изображение /mgr/images/spinner.gif, но не исходное изображение. Есть что-то, чего мне не хватает?

спасибо за вашу помощь Ясон

Ответы [ 2 ]

1 голос
/ 14 сентября 2011

Обычно вы включаете файл плагина после файла ядра jQuery.Таким образом, плагин может расширять ядро ​​jQuery.

Изменить: 

  <script type="text/javascript" src="${resource(dir:'js',file:'jquery.lazyload.js')}">  

  </script>     
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

Кому: 

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" src="${resource(dir:'js',file:'jquery.lazyload.js')}"></script>

Я также рекомендовал бы попробовать использовать новейший файл ядра jQuery.вы можете.Он может сломать старые плагины, но его стоит попробовать, так как с каждым обновлением в jQuery приходят улучшения производительности.

jQuery 1.6.4 из Google CDN .

jQuery1.6.4 из CDN jQuery .

0 голосов
/ 25 августа 2017

Также, если вы хотите загрузить html не только для изображений, используя плагин отложенной загрузки, вы можете легко сделать это с ленивыми обратными вызовами
эта опция "enableThrottle: false", чтобы гарантировать, что ваш обратный вызов всегда выполняется, у меня былонекоторые проблемы из-за этого ... иногда ленивая загрузка не работает ..

в html добавьте "class =" lazy "data-src =" "к элементу в section / div / img для вызова, когдаотображается для добавления нового HTML 

>  $('.lazy').Lazy({
>       chainable: false,
>       enableThrottle: false,
>       onFinishedAll: function () {
>        // do what you need ajax call or other 
>       },
>       beforeLoad: function () {
>            // do what you need ajax call or other 
>       },
>       afterLoad: function () {
>         // do what you need ajax call or other 
>       },
>       onError: function () {
>         console.log('could not be loaded');
>       }
>     });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...