In this tutorial you will learn about image loading effect using jQuery. Using JQuery, Initially load all the images in a variable and bind into an html element using ID. Here I referred jquery-3.2.1.slim.min.js and CSS. The CSS class you can download from the github.
https://github.com/SunnyWoo/ImageLoadEffect
Example code:
<h2>Loading Effect</h2>
<link href="~/css/main.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
crossorigin="anonymous"></script>
<script type="text/javascript">
varimgList = [
"http://56lvmbzh.droibaascdn.com/droi/56lvmbzhOSd5VOT1TNyu3OBXp8oVaHBnlQCN3ToB/895575926968307712/598c24ea85c265245.jpg",
"http://56lvmbzh.droibaascdn.com/droi/56lvmbzhOSd5VOT1TNyu3OBXp8oVaHBnlQCN3ToB/895575928688230400/598c24ea85f8e8217.jpg",
"http://56lvmbzh.droibaascdn.com/droi/56lvmbzhOSd5VOT1TNyu3OBXp8oVaHBnlQCN3ToB/895575930797707264/598c24ea8617e2486.jpg",
"http://56lvmbzh.droibaascdn.com/droi/56lvmbzhOSd5VOT1TNyu3OBXp8oVaHBnlQCN3ToB/895575933506277376/598c24ea863c51554.jpg",
"http://56lvmbzh.droibaascdn.com/droi/56lvmbzhOSd5VOT1TNyu3OBXp8oVaHBnlQCN3ToB/895575936371122176/598c24ea865279731.jpg",
"http://56lvmbzh.droibaascdn.com/droi/56lvmbzhOSd5VOT1TNyu3OBXp8oVaHBnlQCN3ToB/895575937634938880/598c24ea866901074.jpg",
"http://56lvmbzh.droibaascdn.com/droi/56lvmbzhOSd5VOT1TNyu3OBXp8oVaHBnlQCN3ToB/895575939165601792/598c24ea867f08783.jpg"
];
functionloadImage(src, callback) {
varimg = document.createElement("img");
img.src = src;
img.addEventListener("load", function() {
if(this.complete) {
callback();
}
});
}
varbindHtml = function () {
varhtml = '';
for(var i = 0; i < imgList.length; i++) {
html += '<span class="col-xs-4 wx-pipmiddle-xs"><span><img data-src="'+ imgList[i] + '" /></span></span>';
}
$("#rowList").html(html);
// Loop to judge all img
$("#rowListimg").each(function() {
var_this = $(this);
if(_this.attr("src")== undefined) {
var_src = _this.attr("data-src");
loadImage(_src, function() {
//load successfully added after the implementation of the delay can be deleted
setTimeout(function() {
_this.attr("src", _src);
_this.parent().css("background-image", "none");
}, 400);
});
}
});
};
$(document).ready(function() {
bindHtml(); });</script><div id="rowList" class="row pic3"> </div>
IMAGE LOADING EFFECT:
Post your comments / questions
Recent Article
- How to get domain name information from a Domain using Python
- ModulenotFoundError: no module named 'debug_toolbar' -SOLUTION
- How to create superuser in django project hosted in cPanel without terminal
- CSS & images not loading in django admin | cpanel without terminal
- Could not build wheels for mysqlclient, which is required to install pyproject.toml-based projects
- How to sell domain name on Godaddy (2023)
- TemplateSyntaxError at / Could not parse the remainder: ' + 1' from 'forloop.counter0 + 1'
- urllib3 v2.0 only supports OpenSSL 1.1.1+, currently the 'ssl' module is compiled with 'OpenSSL 1.0
Related Article