Question

由于某些原因，我加载图片的功能无效。

我在悬停时显示的页面上有很多弹出窗口。有些人有一个图像，其他人有一些。现在这会减慢加载时间，因此我不希望在用户悬停之前加载图像。

为此，我基本上创建了一个循环，用于抓取每个图像并将src属性更改为data-src属性的值。

这是我的代码：

 jQuery('.tool_tip').hover(
            function(){
                var pop_class = jQuery(this).data("tool");
                var tool_pop = jQuery("#" + pop_class);
                tool_pop.addClass('tool_open');

                tool_pop.find('img').each(function(){
                    var current = jQuery(this);
                    if(!current.hasClass('loaded')){
                        current.setAttribute('src', current.getAttribute('data-src'));
                        current.addClass('loaded'); 
                    }else{
                        return;
                    }
                });
            }, function(){
                var pop_class = jQuery(this).data("tool");
                jQuery("#" + pop_class).removeClass('tool_open');
            }
        );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

 <h2>Delivery Type <img class="tool_tip" data-tool="delivery_pop" src="<?php bloginfo('template_directory'); ?>/images/tool_tip.png" alt="tool tip"></h2>

<div id="delivery_pop" class="tool_pop">
  <div class="flex_pop">
    <img src="<?php bloginfo('template_directory'); ?>/images/lazy_image.svg" data-src="<?php bloginfo('template_directory'); ?>/images/delivery.jpeg" alt="Angle Image">
    <p>You or your courier can collect from our offices any weekday between 8am and 5pm</p>
  </div>
</div>

Answer 1

原来我使用了错误的函数来获取/设置属性。对于jQuery对象，您应该使用.attr或.data而不是getAttribute（）和setAttribute（）

jQuery('.tool_tip').hover(
    function(){
        var pop_class = jQuery(this).data("tool");
        var tool_pop = jQuery("#" + pop_class);
        tool_pop.addClass('tool_open');

        tool_pop.find('img').each(function(){
            var current = jQuery(this);
            if(!current.hasClass('loaded')){
                current.attr('src', current.attr('data-src'));
                current.addClass('loaded'); 
            }else{
                return;
            }
        });
    }, function(){
        var pop_class = jQuery(this).data("tool");
        jQuery("#" + pop_class).removeClass('tool_open');
    }
);

Answer 2

试试这个：

           tool_pop.find('img').each(function(elem){
                var current = jQuery(elem);
                if(!current.hasClass('loaded')){
                    current.setAttribute('src', current.getAttribute('data-src'));
                    current.addClass('loaded'); 
                }else{
                    return;
                }

getAttribute（）和setAttribute（）不起作用

2 个答案: