Question

我目前正在寻找加载我从flickr API中抓取的图片。普通负载是丑陋的，所以我要等到它们全部加载然后同时呈现它们，使用this page上的第二个例子。然而，这使用jQuery，我想要vanilla javascript。我意识到var $ img = $（img）语句只是创建一个对象，但它将一个预先存在的html元素转换为一个，我不知道如何在vanilla JS中做到这一点。我的图片看起来像这样：

<img src="http://farm1.staticflickr.com/97/219568294_6a7bef5794_m.jpg" onload="loaded(this)">

我的功能是：

    function loaded(img){
        var $img = $(img);
        var total = document.getElementById('flickr').getElementsByTagName('img').length;
        var percentLoaded = null;

        $img.addClass('loaded');

        var loaded = document.getElementById('flickr').getElementsByClassName('loaded').length;

        if(loaded == total){
            percentLoaded = 100;
        } else {
            percentLoaded = loaded/total * 100;
            document.getElementById("loadingstatus").style.width = percentLoaded + "%";
        };
    };

一旦我弄清楚函数的$ = $（）部分，我应该可以轻松地将加载类添加到它。

Answer 1

$(an HTML Element Node)返回的不仅仅是“一个对象”，它特别是一个jQuery对象。

普通的DOM等价物只是直接使用img（并在其上调用标准DOM方法而不是jQuery方法）。

Answer 2

jQuery仅用于向img元素添加一个类，所以真正的问题是＆＃34;如何在不使用jQuery＆＃34;的情况下向元素添加类，答案是这样：

img.className += " loaded";

什么是jQuery＆var; $ var =（$ var）语句的vanilla javascript版本？

2 个答案: