标签: jquery-lazyload

插入

我正在使用一个名为lazyload的jQuery插件.

这样做是lazy加载图像 - 这意味着它不会在浏览器中呈现它们,直到图像在视口范围内.

例如,当您拥有包含许多图像的页面时,这非常有用,并且您不希望它在初始加载时永久消耗.

FIREFOX

好的,所以我也在使用Firefox版本23.0.1

问题

插件很棒,但是当在一些图像后向下滚动时,我开始得到图像无法加载的错误(只有一个通用的占位符用于损坏的图像链接),并在控制台中记录:

Image corrupt or truncated: [image url]

并不是图像有问题.它们都可以单独渲染.

它不是SPECIFIC图像,因为它是随机的.如果我再次加载页面,corrupt现在可能加载的图像,其他图像返回断开的链接并登录corrupt控制台.

我四处寻找这个,似乎同时提取<img>src标签存在一些问题.

可能应该在获取时设置延迟,但是你不能总是知道延迟应该有多长.如果一个图像比另一个图像大,它仍然可能会发生冲突(静态延迟时间,而不是complete回调).

因此,我想要求:

a)如果有人知道这个的解决方案(例如在错误发生时捕获并重新触发加载图像功能)
b)如果有人可以$.extend()向上面的库(lazyload)提出一个会创建回调函数并等到所有活动的提取都complete在加载下一个之前(如果这是问题 - 我不确定它是不是) 我不是一个jQuery忍者,所以我对代码有点迷失.我可以搞清楚,但它可能很脏...
c)如果这不是问题,那么我可以解决这个问题的一些方向将不胜感激

我正在为摄影师建立一个网站.它应该使用Bootstrap 3框架构建,并且他希望在一个页面上拥有超过400个图像的砖石.为了工作,LazyLoad是必须的.我现在花了几天时间试图让LazyLoad与 Desandros Masonry合作,但没有成功..

我已经尝试了所有人发现谷歌搜索的例子,但大多数帖子/网站/论坛只是重定向你,或者已经复制了这个stackoverflow答案: 组合LazyLoad和Jquery Masonry

我尝试了两种方法,但不幸的是我只得到了灰白的头发..... :(

以下是我正在使用的页面的简化实时版本:
http://nr.x10.mx
在此示例中,我在页面加载时添加了淡入,但是由于我可以使其工作,因此将LazyLoad保留了.

在这里你有一个以下的FIDDLE

var container = document.querySelector('#ms-container');
imagesLoaded( container, function() 
{
   var msnry = new Masonry(container, 
                                     { itemSelector: '.ms-item',
                                       columnWidth: '.ms-item',});
}); 

您也可以在这里下载整个包,包括jquery.lazyload.js HERE

任何帮助将受到高度赞赏

UPDATE

在这里,您可以找到4个不同问题的不同示例.我也很高兴Bootstrap .img-responsive类干扰了LazyLoad.

1 - 没有
LazyLoad 2的砌体 - 砌体和Lazyload - 砌体破坏而LazyLoad没有效果
3 - LazyLoad没有砌体 -
LazyLoad 没有效果4 - LazyLoad没有砌体和Bootsrap"img-responsive"删除
5 - Masonry&LazyLoad使用第一种方法上面提到的SO答案
6 - Masonry&LazyLoad使用上面提到的SO答案的第二种方法
最后两种方法都给出了以下错误:[错误] TypeError:'undefined'不是一个函数(评估'$ container.imagesLoaded')全局代码(5.html,第110行) …

我懒惰地使用jquery lazyload和一个阈值加载此站点上的图像:https://bm-translations.de/#leistungen

//Lazyload Images with Threshold https://www.appelsiini.net/projects/lazyload
$(function() {
    $("img.lazy").lazyload({
        threshold : 400
    });
}); 

所以图像src被替换为data-original.当我滚动到元素时,它应该将其更改src为.

但出于某种原因,它加载引导滑块中的图像太慢(当我点击它或它的自动滑动一些图像没有加载),你可以看到.如何调整此代码,以便它也适用于此？

滑块的结构如下:https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

Carousel JS是:

$('#myCarousel').carousel({
        interval: 9000,
    });

    // handles the carousel buttons
    $('[id^=carousel-selector-]').click( function(){
      var id_selector = $(this).attr("id");
      var id = id_selector.substr(id_selector.length -1);
      id = parseInt(id);
      $('#myCarousel').carousel(id);
      $('[id^=carousel-selector-]').removeClass('selected');
      $(this).addClass('selected');
    });

    // when the carousel slides, auto update
    $('#myCarousel').on('slide.bs.carousel', function (e) {
      var id = $('.item.active').data('slide-number');
      id = parseInt(id)+1;
      $('[id^=carousel-selector-]').removeClass('selected'); …

我有一个生成我的图像的ashx文件处理程序.

<img src="www.mywebsite.com/action/getimage.ashx?imageID=f8be4bf6&width=100&height=700&bgcolor=999" />

一切正常.

现在,我想使用延迟加载.使用这个jquery延迟加载插件

所以我调整了我的html图像:

<img src="imageplaceholder.gif" original-data="www.mywebsite.com/action/getimage.ashx?imageID=f8be4bf6&width=100&height=700&bgcolor=999" />

并添加了以下脚本:

$(function() {
   $("img").lazyload();
});

我注意到在谷歌Chrome devoloper工具的网络选项卡中,有两个调用此文件处理程序.

我在这里创建了一个测试小提琴:链接 如果您向下滚动此小提琴,您将在Google Chrome中加载图像时看到两个图像请求.在Firefox和IE中,这只能使用一个调用.

有什么方法可以避免这种行为吗？

更新:

在文件处理程序中设置以下标头:

[0] "Server"    "Microsoft-IIS/7.5"
[1] "Set-Cookie"    "lang=nl; expires=Tue, 04-Feb-2014 13:08:56 GMT; path=/"

并且Response对象的Expires属性是:

context.Response.Expires = 0

演示

我需要从以下代码中获取图像src

HTML

<div class="avatar profile_CF48B2B4A31B43EC96F0561F498CE6BF ">
    <a onclick="">
        <img id="lazyload_-247847544_0" height="74" width="74" class="avatar potentialFacebookAvatar avatarGUID:CF48B2B4A31B43EC96F0561F498CE6BF" src="http://media-cdn.tripadvisor.com/media/photo-l/05/f3/67/c3/lilrazzy.jpg" />
    </a>
</div>

我试着写js:

foreach($html->find('div[class=profile_CF48B2B4A31B43EC96F0561F498CE6BF] a img') as $element) {
    $img = $element->getAttribute('src');
    echo $img;
}

但它显示src键不存在.如何废弃评论头像图片？

更新:

当我查看页面源时找不到图像网址,但是firebug显示图片网址:

<img id='lazyload_1953171323_17' height='24' alt='4 helpful votes' width='25' class='icon lazy'/>

这是我的页面的源代码:

<div class="col1of2">
<div class="member_info">
<div id="UID_3E0FAF58557D3375508A9E5D9A7BD42F-SRC_175428572" class="memberOverlayLink" onmouseover="ta.trackEventOnPage('Reviews','show_reviewer_info_window','user_name_photo'); ta.call('ta.overlays.Factory.memberOverlayWOffset', event, this, 's3 dg rgba_gry update2012', 0, (new Element(this)).getElement('.avatar')&&(new Element(this)).getElement('.avatar').getStyle('border-radius')=='100%'?-10:0);">
<div class="avatar profile_3E0FAF58557D3375508A9E5D9A7BD42F ">
<a onclick=>
<img id='lazyload_1953171323_15' height='74' …

我有需要绝对定位的图像,以便图像的中心位于其父div的中心.我已经有了执行此操作的代码.

我最近添加了Lazy Load插件,它按预期工作.但是我需要一种在延迟加载加载和淡入图像后触发我的图像居中代码的方法.

我目前的代码基本上是这样的:

jQuery(document).ready( function($) {

// Make all lazy images ready to load themselves and listen for a custom event
$("img.lazy").lazyload({ event:"delayed-lazy-load-event", effect : "fadeIn"});

});


// Wait for the iframes and other important junk to finish loading
jQuery( window ).load( function($){

// trigger lazy loading of thumbnails.
$("img.lazy").trigger("delayed-lazy-load-event")
}

我找不到任何关于Lazy Load的任何功能的信息,它允许我设置一个回调函数在运行fadeIn效果后运行.

当我在tinymce中添加图像时,这是我得到的默认html源代码:

<p><img class="img-responsive img-post" src="/Images/uploads/img.png" alt="" /></p>

我该如何改变？类似于:

<p><img class="img-responsive img-post" data-original="/Images/uploads/img.png" src="/Images/loading.gif" alt="" /></p>

我有数据原始的src和src是加载图标,它需要是这样的,因为我有懒惰加载图像.

我知道你可以扩展有效元素:

extend_valid_elements: "data-original"

但是如何更改默认html源代码的结构？是否有类似的选择确定图像插入回调？

更新:

这是我的tinymce启动代码:

/******************************tinyMce*******************************/
function tinyMce() {
    tinymce.init({
        theme: "modern",
        selector: "#mceEditor",
        height: 500,
        extend_valid_elements: "data-original",
        relative_urls: true,
        convert_urls: false,
        image_advtab: true,
        image_title: false,
        image_description: false,
        image_dimensions: false,
        image_class_list: [
            { title: "Responsive", value: "lazy img-responsive img-post" }
        ],
        image_list: function (success) {
            $.ajax({
                url: "/Image/List",
                type: "GET",
                dataType: "json",
                success: function (data) {
                    success(data);
                }
            });
        },
        // enable automatic …

我想用图书馆http://afarkas.github.io/lazysizes/加载背景图像“懒惰”
他们确实提到可以懒惰地加载“任何东西”。但是关于那个的整个文档是这样的：

<div data-ride="carousel" data-script="assets/js/bootstrap.min.js" class="carousel lazyload">
    <!-- widget content -->
<div>

我不知道如何将其用于背景图像。有没有人有这方面的经验？

其实我想做的当我悬停在第一张图片上时必须再次出现我想和你分享我的结构

<div class="tur-list-box">

    <div class="tur-list-content">
        <figure>
          <img data-src="img/assets/tourlist-2.jpg" class="lazy" src="img/assets/placeholder.png" alt="tur sayfas?">
          <a href="#" class="figure-overlay">
              <p class="tour-price">
                <span class="price-big">73,</span>
                <span class="price-little">40</span>
                <span class="price-unit">TL*</span>
                <span class="price-block">‘den itibaren</span>
              </p>
          </a>
        </figure><!-- tur resim-->

        <div class="tur-details">
          <h3><a href="#">Hafta Sonu Turlar?</a></h3>
          <p>15 farkl? program</p>
          <i class=" open-tur-toggle fa fa-chevron-down" aria-hidden="true"></i>
        </div><!-- tur detay-->

    </div><!-- tur list content-->

    <div class="tur-list-toggle">
      <ul class="list-unstyled">
        <li><a href="#" data-img="http://cdn.anitur.com.tr/resimler/orta/2016-02/otel_buyuk-abant-oteli_vPYKBnet58y0itPrkpce.jpg">Kakava ( H?d?rellez ) ?enlikleri Alaçat? <i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
        <li><a href="#" data-img="http://cdn.anitur.com.tr/resimler/orta/2016-10/otel_abant-palace-hotel_FTfyg8HYVB9lNeOUMA76.jpg">Ot Festivali Urla Enginar Festivali Turu <i class="fa fa-chevron-right" …

我正在使用延迟加载插件（jquery.lazyload.js），并尝试获取它加载的图像大小。所以在显示部分我有：

 echo '<img #img id="img-' . $i . '" name="' . $filename . '" class="lazy" data-original="'.$image.'" />';

Java脚本：

<script type="text/javascript">     
   displaysize(img) {
      console.log(img.clientWidth, img.clientHeight);
   }        

</script>


<script src="js/rectangle3.class.js"></script>

HTML：

<div id="imgsize">
  <p id='imgsize-debug'></p>
  <button id='map-download-btn' onclick='displaysize();'>Image size:</button>
  <div id='imagesize'></div>
</div>

图像显示正常，但是当我将 displaysize(img) 函数添加到脚本和按钮时，页面继续加载。我需要在我的java脚本文件中获取图像大小以进行计算，

document.getElementById("rectRecord-" + this.rectPointer).innerHTML =
        "Rectangle " + (this.rectPointer + 1) + " ("
        + this.startX + ", "
        + this.startY + ", "
        + this.endX + ", "
        + this.endY + ")"

需要更改为：

 document.getElementById("rectRecord-" + this.rectPointer).innerHTML = …